时间戳

首页 > 解决方案 > 车轮事件 PreventDefault 不取消车轮事件

javascript - 车轮事件 PreventDefault 不取消车轮事件

问题描述

我想每个滚动事件只获得一个事件

我尝试了这段代码，但它会在触发轮子事件的次数下产生“轮子”。有什么帮助吗？谢谢

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

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

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

标签： javascripteventsmousewheel

解决方案

这是一个相当简单的问题，将最后一个方向存储在任何地方并以代码方式执行您的代码：

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>

推荐阅读