滾動條 animation 上下波動不規律，鼠標滾輪可能存在輸入滯后

Question

每次我分別向下或向上移動鼠標滾輪時，我都試圖觸發平滑滾動到頁面末尾的一個元素和另一個到頁面頂部的元素。 這兩個部分都有高度：100vh。

問題是，一旦它下降，它就會開始隨機運行。 我覺得我需要在卷軸完成后完全中斷 animation，因為它“自相殘殺”掙扎着 go 備份，反之亦然。 當然我可能很容易出錯，我正在努力學習方法。

有一些性能問題嗎？ 可能無法及時獲取輸入？ 東西重疊了？ 在我再次滾動之前似乎有某種冷卻時間。 這就是我想了解的。 謝謝

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

Calling.stop(true) 有效，但我相信如果您繼續朝 animation 的方向滾動，延長 animation 的持續時間，它可能會導致 animation 中間出現問題。或者，您可以執行以下操作以確保 animation 在執行另一個 animation 之前完成.

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