滚动动画在上下移动时表现不稳定，可能在鼠标滚轮上输入延迟

Question

我试图触发一个平滑滚动到一个元素在页面的末尾和另一个到页面的顶部每次我移动鼠标滚轮分别向下或向上。两部分高度均为100vh

问题是，一旦它下降，它开始随机行为。我觉得我需要在滚动完成后完全中断动画，因为它会"自我争斗"。挣扎着向上走，反之亦然。当然，我可能很容易出错，我正在努力学习方法。

是否存在性能问题?也许它无法及时获得输入?有些东西重叠了?似乎在我再次滚动之前有某种冷却时间。这就是我想要理解的。由于

jQuery(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
console.log("scroll up");
jQuery('html,body').animate({scrollTop: jQuery("#top").offset().top}, 1200, 'linear');
}
else {
// scroll down
console.log("scroll down");
jQuery('html,body').animate({scrollTop: jQuery("#bottom").offset().top}, 1200, 'linear');
}
});

与此相同，这里我使用Jquery。scrollTo图书馆

jQuery(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up
console.log("scroll up");
jQuery('body').scrollTo('#top', {duration:1200});
}
else {
// scroll down
console.log("scroll down");
jQuery('body').scrollTo('#bottom', {duration:1200});
}
});

下面是完整的html:

<div id="top" style="height:100vh;background-color: #2196f3;"></div>
<div id="bottom" style="height:100vh;background-color: #009688;"></div>

编辑:如果我移动鼠标滚轮的最小值，它可以完美地工作，所以问题是输入重叠，换句话说，我需要一种方法来发送第一个滚动输入，而不是整个滚动，否则太多的输入会使脚本崩溃。

这是一个工作的例子，试着上下滚动:https://jsfiddle.net/mr8hnxbd/

Answer 1

调用.stop(true)是有效的，但是我认为如果您继续在动画的方向上滚动，延长动画的持续时间，可能会导致动画中期出现问题。或者，您可以执行以下操作以确保动画在执行另一个动画之前完成。

(function(jQuery) {
let position = '';
let scrolling = false;
let animationDuration = 1200;
jQuery(window).bind('mousewheel', function(event){
if (event.originalEvent.wheelDelta > 0) {
// scroll up
if (scrolling || position === 'top')
return;
//console.log("scroll up");
scrolling = true; //Prevents any scrolling when scrolling is active
position = 'top'; //Prevents scrolling up when already at the top
jQuery('html,body').animate(
{
scrollTop: jQuery("#top").offset().top
},
animationDuration,
'linear',
function () {
scrolling = false; //After the animation is complete, set scroling to false
},
);
}
else {
// scroll down
if (scrolling || position === 'bottom')
return;
//console.log("scroll down");
scrolling = true;
position = 'bottom';
jQuery('html,body').animate(
{
scrollTop: jQuery("#bottom").offset().top
},
animationDuration,
'linear',
function () {
scrolling = false;
},
);
}
});
})($);

<div id="top" style="height:100vh;background-color: #2196f3;"></div>
<div id="bottom" style="height:100vh;background-color: #009688;"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>