4

I'm trying to build site from divs that act kinda like pages. So there are multiple divs with min-height of 100% of browser window on top of each other. I'm trying to make navigation work so that user can scroll to next div with mouse wheel. I found this useful piece of code:

http://jsfiddle.net/Mottie/Vk7gB/

$('#nav').onePageNav();



var $current, flag = false;

$('body').mousewheel(function(event, delta) {
    if (flag) { return false; }
    $current = $('div.current');

    if (delta > 0) {
        $prev = $current.prev();

        if ($prev.length) {
            flag = true;
            $('body').scrollTo($prev, 1000, {
                onAfter : function(){
                    flag = false;
                }
            });
            $current.removeClass('current');
            $prev.addClass('current');
        }
    } else {
        $next = $current.next();

        if ($next.length) {
            flag = true;
            $('body').scrollTo($next, 1000, {
                onAfter : function(){
                    flag = false;
                }
            });
            $current.removeClass('current');
            $next.addClass('current');
        }
    }

    event.preventDefault();
});

But you can see that there is problem when content is longer than the browser window. I would like it to work so that if current div is longer than browser window scrolling works normally, but it should stop at the bottom of the div and then next time scroll all the way to the next div. Is there any way to make this happen?

I hope that this makes some sense..

Thanks,

-Mikkå

4

2 に答える 2

0

この記事では、あなたのアイデアの代わりにそれを使用することを好む同様のソリューションを見つけることができます

セクションを定義することができます。可能であれば、ページをブラウザーに独断的に適合させることをお勧めします

これはあなたが使用できるgithub jsライブラリです

これは、明確でわかりやすいオンライン デモです。

于 2016-10-02T09:58:46.537 に答える
0

http://jsfiddle.net/Vk7gB/261/

完成したソリューションではありませんが、正しい道を歩むことができます。

$('#nav').onePageNav();

var $current, flag = false, b = $('body');

b.mousewheel(function(event, delta) {
if (flag) { return false; }
$current = $('div.current');

var $next;
if (delta > 0) $next = $current.prev();
else $next = $current.next();

var scrollTop = b.scrollTop();
var elHeight = $current.height();
var nextOffset = $next.offset().top;
var avHeight = screen.availHeight;

console.log(scrollTop, nextOffset, elHeight, avHeight);
if(scrollTop + elHeight - avHeight < nextOffset){
    return true;
}

if ($next.length) {
    flag = true;
    $next.scrollTop();        
    $('body').scrollTo($next, 1000, {
        onAfter : function(){
            flag = false;
        }
    });
    $current.removeClass('current');
    $next.addClass('current');
}

event.preventDefault();
return false;
});
于 2013-12-02T17:53:57.230 に答える