javascript - 防止 scrollTop 调用滚动事件

Question

我正在尝试创建此行为:当用户滚动鼠标滚轮(或按 ↓)时，网页会向下滚动窗口的高度。

我最终得到了以下代码:

var newScrollTop,
    oldScrollTop = $(window).scrollTop(),
    preventScroll = false;
$(window).scroll(function() {
    if (!preventScroll) {
        preventScroll = true;
        newScrollTop = $(this).scrollTop();
        if (newScrollTop > oldScrollTop) {
            $(this).scrollTop( oldScrollTop + $(window).height() );
        }
        else {
            $(this).scrollTop( oldScrollTop - $(window).height() );
        }
        oldScrollTop = newScrollTop;
        preventScroll = false;
    }
});

但这并不像我预期的那样工作:在滚动事件页面上滚动到最边缘(底部或顶部)。我错过了什么？

Answer 1

问题是您使用的是 scrollTop()，它会在窗口滚动事件本身内触发滚动事件。

所以基本上，您编写的代码会陷入无限循环，因为一旦第一个滚动事件被触发，另一个滚动事件就会被 scrollTop() 触发，而您的 preventScroll 变量仍未设置为 false 等。

要使您的代码正常工作，您必须在 setTimeout 函数内将 preventScroll 变量设置为 false，如下所示:

var newScrollTop,
    oldScrollTop = $(window).scrollTop(),
    preventScroll = false;

$(window).scroll(function() {
    if (!preventScroll) {
        preventScroll = true;
        newScrollTop = $(this).scrollTop();
        if (newScrollTop > oldScrollTop) {
            $(this).scrollTop( oldScrollTop + $(window).height() );
        }
        else {
            $(this).scrollTop( oldScrollTop - $(window).height() );
        }
        oldScrollTop = newScrollTop;

        setTimeout(function(){ preventScroll = false; }, 0);
    }
});

在将 preventScroll 设置为 false 之前，我们添加了一些“延迟”。这样，当您调用 scrollTop() 时，preventScroll 变量仍将设置为 true !

这是一个有效的 fiddle :http://jsfiddle.net/J6Fcm/ (我稍微修改了你的代码，让滚动步骤按预期工作)