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

我正试图从行为有点像页面的div构建网站。因此，存在多个div，每个div的最小高度为浏览器窗口的100%。我试图让导航工作，以便用户可以滚动到下一个div与鼠标滚轮。我发现了这段有用的代码：

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

我希望这有点道理

谢谢

-Mikkå

这不是一个完整的解决方案，但它会让你走上正确的道路

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

$（'#nav'）.onePageNav（）；
var$current，flag=false，b=$（'body'）；
b、 鼠标滚轮（功能（事件，增量）{
if（flag）{return false；}
$current=$（'div.current'）；
var$next；
如果（增量>0）$next=$current.prev（）；
else$next=$current.next（）；
var scrollTop=b.scrollTop（）；
var elHeight=$current.height（）；
var nextofset=$next.offset（）.top；
var avHeight=屏幕可用高度；
日志（scrollTop、nextOffset、elHeight、avHeight）；
if（滚动顶部+elHeight-avHeight

在这里，您可以找到类似的解决方案，我更喜欢使用它，而不是您的想法

您可以定义节，我建议您，如果可能的话，使您的页面适合于浏览器的专制

您可以使用github js库吗

---

这是一个对你来说清晰透明的在线演示

仅仅是一个评论，作为一个用户，我会觉得非常烦人。在我看来，永远不要劫持用户控件，让他们做出不应该的行为。通常我同意你的观点，但这次整个概念将有点不同于普通网站。我希望对用户体验有更多的控制。不过还是谢谢你。

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