鼠標滾輪事件每次滾動會話只觸發一次

我試圖模仿以下網站的功能：www.verbaasd.net。每個滾動「會話」只會觸發一個動作。鼠標滾輪事件每次滾動會話只觸發一次

每次用戶向下滾動動作都會發生，具體取決於變量計數的狀態。我只希望每次滾動都會發生一次。例如，如果用戶擁有帶觸摸板的Macbook，它將多次觸發很多次。計數將立即從1到4。有沒有辦法設置一個超時或什麼，所以當變異數計數增加或減少1時，它停止0.5秒？

當前代碼：

var count = 1; 

$(window).on('mousewheel DOMMouseScroll', function(e) { 
    if (e.originalEvent.wheelDelta/120 > 0) { 
    count -= 1; 
    } else { 
    count += 1; 
    } 
    if (count < 1) count = 1; 
    if (count > 4) count = 4; 

    switch (count) { 
    case 1: 
     // do something 
     break; 
    case 2: 
     // do something 
     break; 
    case 3: 
     // do something 
     break; 
    case 4: 
     // do something 
     break; 
    } 

    $(".cd-background-wrapper").attr("data-slide", count); 

});

來源

2016-04-09 elw

https://stackoverflow.com/questions/25860108/jquery-page-scroll-event-logic-how-to-throttle – Burimi

https://css-tricks.com/the -throttling-and-debouncing/ –

謝謝！無法讓Underscore工作，但lodash工作得很好。謝謝！ – elw

我建議其他的方式。

您應該使用'preventDefault'並使用setTimeout延遲效果。

我在鏈接下面寫了一個簡單的原型代碼。（僅在瀏覽器和Safari測試）

http://codepen.io/nigayo/pen/PNEvmY

[HTML]

<body> 
    <div id="wrap"> 
    <section>section A</section> 
    <section>section B</section> 
    <section>section C</section> 
    <section>section D</section> 
    </div> 
</body>

[CSS]

body { 
    overflow: hidden; 
    height: 100%; 
} 

#wrap { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    top: 0; 
} 

section { 
    width: 100%; 
    height: 600px; 
} 

section:nth-child(1) { 
    background: red; 
} 
section:nth-child(2) { 
    background: blue; 
} 

section:nth-child(3) { 
    background: green; 
} 
section:nth-child(4) { 
    background: magenta; 
}

[JavaScript的]

(function() { 
    var currentPanel = 1; 
    var wrap = $('#wrap'); 
    var panelsize = 600; 
    var step = 10; 
    var interval = 1000; 
    var direction = 1; 

    var bAnimation = false; 

    function animation() { 
    setTimeout(function() { 
     var currentTop = parseInt(wrap.css("top")); 

     if (direction < 0) { 
     if (currentTop <= minValue) { 
      setTimeout(function() { 
      bAnimation = false; 
      }, interval); 
      return; 
     } 
     } else { 
     if (currentTop >= minValue) { 
      setTimeout(function() { 
      bAnimation = false; 
      }, interval); 
      return; 
     } 
     } 

     wrap.css({ 
     "top": currentTop - step 
     }); 
     animation(); 
    }, 16); 
    } 

    $(window).bind('mousewheel DOMMouseScroll', function(event) { 
    event.preventDefault(); 
    if (bAnimation) return; 

    var currentTop = parseInt(wrap.css("top")); 

    if (event.originalEvent.wheelDelta < 0) { 
     //down scroll 
     minValue = currentTop - panelsize; 
     step = 10; 
     direction = -1; 
    } else { 
     //up scroll 
     minValue = currentTop + panelsize; 
     step = -10; 
     direction = 1; 
    } 

    console.log(minValue, bAnimation); 
    bAnimation = true; 
    animation(); 
    }); 
})();

如果您引用了我的代碼，則應該爲動畫邏輯使用「jquery動畫函數」或「requestAnimationframe」。

來源

2016-04-09 10:12:56 superui

謝謝A. Wolff。使用_.throttle與lodash.js做了訣竅！你可以在這裏找到更多的信息：https://css-tricks.com/the-difference-between-throttling-and-debouncing/

來源

2016-04-09 11:03:40 elw

鼠標滾輪事件每次滾動會話只觸發一次

回答

相關問題