使用JQuery：当滚动到当前div的末尾时，用鼠标滚轮滑动到下一个div

Question

我正在尝试构建一个由div组成的网站，这些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的最前面。有没有办法实现这个功能？我希望这有点意义... 谢谢，- Mikkå

- Mikkå

---

只是一条评论，我认为作为用户会觉得非常烦人。在我看来，永远不要劫持用户的控件，让他们表现得不应该这样。 - Rick Calder

通常我同意你的看法，但这次整个概念会有点不同于普通网站。我想要对用户体验有更多的控制权。但还是谢谢你。 - Mikkå

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

- rafaelcastrocouto

Answer 2

在这个文章中，你可以找到一个类似的解决方案，我更喜欢使用它而不是你的想法

你可以定义区块，如果可能的话，我建议你让你的页面自动适应浏览器

这个是一个Github JS库，你可以使用它

这个是一个在线演示，非常清晰透明

- saber tabatabaee yazdi