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

Question

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

当我点击文档底部并按nextButton时，我转到顶部。反过来说previousButton. 所以它不断地循环。

它还考虑了我的滚动位置，但我暂时将溢出设置为hidden。

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

如果我添加，对于 instace4000在 scrollTop 函数旁边，指示它应该进行 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学校的某些示例似乎在设定的持续时间下完全可以动画化，除非宽度/高度的变化等与滚动顶部相比完全不同

我的完整代码代码笔

Answer 1

这是因为你的cssscroll-behavior:smooth;

删除此部分即可工作。