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

    });

小提琴： custom api

Answer 1

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

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

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

此外，通过首先比较滚动位置和前一滚动位置，可以改善用于设置目标位置的公式。如果更高，则滚动一个＆＃34;页面＆＃34;下来，否则一个＆＃34;页面＆＃34;起来。为此，您应该将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。

scrollTop似乎不正确

1 个答案: