鼠标垫在 JavaScript 中触发过多的“滚轮”事件

Question

我正在尝试检测网页上的“wheel”事件以拦截这些事件并改为实现逐页滚动。

这适用于鼠标 - 使用滚轮似乎触发了一个“滚轮”事件，我可以拦截它。

但是，我对鼠标垫有疑问，它似乎会触发多个连续的“滚轮”事件。我尝试使用 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);
  }
});