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>

Answer 2

您几乎拥有它，但是您需要将代码包装在一个函数中。我添加了一些额外的内容，以便您可以区分上下：）

//scroll wheel manipulation
  window.addEventListener('wheel', function (e) {
    //TODO add delay
    if (e.deltaY < 0) {
      //scroll wheel up
      console.log("up");
    }
    if (e.deltaY > 0) {
      //scroll wheel down
      console.log("down");
    }
  });

它如何工作？

（e） =这只是事件，当您上下滚动时都会触发该函数，但是没有函数事件就不知道该怎么办！通常人们会放“ 事件”，但我很懒。

deltaY =这是滚轮滚动的功能，它只是确保您沿Y轴滚动。它是标准的内置函数，无需添加任何外部变量。

其他

setTimeout

您可以添加它。在@Lonnie Best建议的if语句中

Answer 3

您可以设置最少的时间，然后再将其他滚动事件视为可行。

例如，下面的滚动事件之间必须经过3秒才能再次触发console.log("wheel")：

function createScrollEventHandler(milliseconds)
{
  let allowed = true;
  return (event)=>
  {
        event.preventDefault();
        if (allowed)
        {
          console.log("wheel");
          allowed = false;
          setTimeout(()=>
          {
            allowed = true;
          },milliseconds);
        }  
  }
}
let scrollEventHandler = createScrollEventHandler(3000); // 3 seconds
window.addEventListener("wheel",scrollEventHandler);

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

3 个答案: