javascript - Animate() 滚动有不必要的延迟

Question

我使用 nextButton 和 previousButton 滚动屏幕上的 6 个场景。

当我点击文档底部并按下 nextButton 时，我会转到顶部。 previousButton 的另一种方式。所以它不断循环。

它还会考虑我的滚动位置，但我现在将溢出设置为隐藏。

我使用 animate({scrollTop}) 来获得我想要的滚动效果，但是，为其添加持续时间不会使动画以该速度运行。它增加了延迟。

如果我要在 scrollTop 函数旁边添加，例如 4000，以指示它应该进行 4 秒滚动，它将等待这 4 秒，然后滚动到下一个/以正常速度播放上一个场景。

举一个按钮代码的例子:

$("#previousButton").on('click', function(e) {
     e.preventDefault();

     $('.scenes').each(function() {
        if ($(this).isInViewport()) {
            prevSlide = $(this).prev();
        }
    });


//goes to last scene to create scrolling loop
    if(prevSlide.length == 0) {
  prevSlide = $('.scenes').last();
    }


        $("html, body").animate ({scrollTop: $(prevSlide).offset().top}, 10);
});

目前我将持续时间设置为 10 以确保在动画发生之前有最小的延迟，但这当然不是我想要的。

是什么导致了这种延迟，如何解决？还是这是正常行为？我问这个的原因是因为 w3 学校的某些例子似乎在设定的持续时间内完全没问题，除非宽度/高度的变化等与 scrollTop 相比完全不同

My codepen for the full code

Answer 1

这是因为你的 css scroll-behavior:smooth;

去掉这部分就可以了。