JQuery:到达当前div末尾后用鼠标滚轮滚动到下一个div

Question

我正在尝试从类似于页面的 div 构建网站。因此有多个 div 的最小高度为浏览器窗口的 100%，彼此重叠。我正在尝试使导航工作，以便用户可以使用鼠标滚轮滚动到下一个 div。我发现这段有用的代码:

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();
});

但是您可以看到，当内容长于浏览器窗口时，就会出现问题。我希望它能够工作，这样如果当前的 div 比浏览器窗口长，滚动就可以正常工作，但它应该停在 div 的底部，然后下次一直滚动到下一个 div。有什么办法可以实现这一点吗？

我希望这是有道理的..

谢谢

-米卡

Answer 1

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;
});