Question

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

这在鼠标上很好用-使用滚轮似乎会触发一个“滚轮”事件，我可以拦截该事件。

但是我的鼠标垫有问题，似乎触发了多个连续的“滚轮”事件。我曾尝试使用underscoreJS限制我的自定义滚动功能并禁用结尾，但是仍然触发了后续事件。

[data-vegetable~="bar"]

在第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);
  }
});

鼠标垫在JavaScript中触发了太多“滚轮”事件

1 个答案: