车轮事件PreventDefault不会取消车轮事件

Question

我只希望每个滚动事件获得一个事件

我尝试了这段代码，但是它多次触发wheel事件时都会产生“ wheel”。有什么帮助吗？谢谢

window.addEventListener("wheel",
    (e)=> {
        console.log("wheel");
        e.preventDefault();
    },
    {passive:false}
    );

用例（编辑）我想只允许在页面之间滚动-滚动时带有动画。一旦我检测到onwheel事件，我想在动画结束之前将其停止，否则，前一个onwheel将继续触发并将其视为新事件，因此转到目标页面的下一个页面

我的结论：无法取消车轮事件。为了在进行滚轮事件（来自以前的用户动作）时识别新的用户滚轮动作，我们需要计算此类事件的速度/加速度

Answer 1

这是相当简单的问题，将最后一个方向存储在任何位置并按条件执行代码：

direction = '';
window.addEventListener('wheel',  (e) => {
    if (e.deltaY < 0) {
      //scroll wheel up
      if(direction !== 'up'){
        console.log("up");
        direction = 'up';
      }
    }
    if (e.deltaY > 0) {
      //scroll wheel down
      if(direction !== 'down'){
        console.log("down");
        direction = 'down';
      }
    }
  });

无论如何，应该定义 UX 上下文。在某些情况下，限制或消除函数可能会产生更好的结果。

节流

限制强制规定随时间推移调用函数的最大次数。如“最多每 100 毫秒执行一次此函数”。

去抖

去抖动强制函数在经过一定时间而没有被调用之前不会被再次调用。如“仅当 100 毫秒过去而未调用该函数时才执行该函数。

就您而言，也许去抖是最好的选择。

暂时锁定浏览器滚动

$('#test').on('mousewheel DOMMouseScroll wheel', function(e) {
    e.preventDefault();
    e.stopPropagation();

    return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
  <h1>6</h1>
  <h1>7</h1>
  <h1>8</h1>
  <h1>9</h1>
  <h1>10</h1>
</div>