javascript - scrollTop 似乎不正确

Question

我想将自定义滚动写入部分功能。

当我加载页面并向下滚动时，它应该向下滚动窗口的高度，这很好。

然后，如果再次向下滚动，我想检查页面是否滚动超过窗口高度(如果向下滚动，则应该是)，但它似乎卡在第一次滚动后的位置。

所以我可以从红色变为黄色，但不能从黄色变为绿色。

var winHeight = window.innerHeight;
$('div').each(function(){
        $(this).css('height', winHeight);
});

function scrollSections() {

        var windowHeight = window.innerHeight;
        var scrollTop = $(window).scrollTop();
        var pos = windowHeight;

        if (scrollTop > windowHeight) {
            pos = windowHeight * 2;
        }

        $('body, html').animate({scrollTop: pos}, 1000, function() {
        });
}

$( window ).on( "scroll", function() {

        scrollSections();

    });

fiddle : https://jsfiddle.net/zts70yc1/

Answer 1

当您调用 $('body, html').animate({scrollTop: pos}, ...); 时，您将触发滚动事件，这将再次运行您的处理程序，这将根据当前(非最终)滚动位置再次启动动画，依此类推。这会成倍增加发生的滚动次数:这不是您想要的。

相反，在事件处理程序中执行任何其他操作之前，请检查动画滚动是否正在进行，然后决定接下来要做什么。例如，在这种情况下，您可以退出处理程序，这样动画就可以不受干扰地继续:

if ($('body, html').is(':animated')) return; // exit when animation ongoing

此外，通过首先将滚动位置与前一个滚动位置进行比较，可以改进设置目标位置的公式。如果更高，则向下滚动一“页”，否则向上滚动一“页”。为此，您应该将 pos 保留为全局变量，并执行以下操作:

var pos = $(window).scrollTop();
function scrollSections() {
        if ($('body, html').is(':animated')) return;
        var windowHeight = window.innerHeight;
        var scrollTop = $(window).scrollTop();
        if (pos == scrollTop) return; // no change
        // depending on scroll direction, go page up, down
        pos += pos < scrollTop ? windowHeight : -windowHeight;
        // round to nearest page boundary
        pos = Math.round(pos / windowHeight) * windowHeight;
        $('body, html').animate({scrollTop: pos}, 1000, function() {
        });
}

这些更改已应用于 this fiddle .