在JavaScript鼠标垫烧太多的“轮”事件

Question

我试图侦测网页上的“轮”事件来拦截这些和实施页逐页滚动代替。

这工作得很好用鼠标 - 使用车轮似乎触发一个“轮子”事件，我能拦截。

我有不过鼠标垫，这似乎触发多个连续的“轮”事件的问题。我曾尝试使用underscoreJS和禁用尾端节流我自定义的滚动功能，但不知何故，后续的事件仍在烧..

wheelHandlerThrottled: _.throttle(function(e, pageNum) {
  // My scrolling code
}, 500, {leading: true, trailing: false})

当第1页上，并用鼠标垫向下滚动，我会得到以下行为：

滚动至第2个500毫秒暂停滚动到第3个500毫秒暂停滚动到第4页

登录控制台的事件让我发现3“轮”事件被触发和处理..所以它就像我的限制是不工作，而是一个暂停插入每一个事件之间。

Answer 1

油门似乎只是堆积在滚动的事件。

我会像这样的东西jsfiddle做

本质上的事件侦听器的鼠标滚轮，当其触发存在对于x毫秒为单位，直到它可以被再次触发。

let canScroll = true;
let marginTop = 10;
const element = $('#custom');
window.addEventListener('mousewheel', (event) => {
    if (canScroll) {
    if (event.deltaY > 0) {
      marginTop += 10;
    } else {
      marginTop -= 10;
    }
    element.css('margin-top', marginTop + 'px');
    canScroll = false;
    setTimeout(() => {
      canScroll = true;
    }, 1000);
  }
});