Javascript 现代浏览器中的鼠标滚轮事件

我希望mousewheel事件使用干净漂亮的JavaScript，只支持最新版本的普通浏览器，没有过时版本的遗留代码，没有任何JS框架

鼠标滚轮事件得到了很好的解释。如何为当前最新版本的浏览器简化它

someObject.addEventListener("onwheel" in document ? "wheel" : "mousewheel", function(e) {
  e.wheel = e.deltaY ? -e.deltaY : e.wheelDelta/40;
  // custom code
});

我没有访问所有浏览器来测试它，所以这对我来说是一个很大的帮助。唉，这里没有提到鼠标滚轮

基于Derek的评论，我写了这个解决方案。它对所有浏览器都有效吗

someObject.addEventListener("onwheel" in document ? "wheel" : "mousewheel", function(e) {
  e.wheel = e.deltaY ? -e.deltaY : e.wheelDelta/40;
  // custom code
});

---

下面有一篇文章对此进行了描述，并给出了一个示例：

相关代码，减去给定的调整图像大小的具体示例：

var myitem = document.getElementById("myItem");
if (myitem.addEventListener)
{
    // IE9, Chrome, Safari, Opera
    myitem.addEventListener("mousewheel", MouseWheelHandler, false);
    // Firefox
    myitem.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else
{
    myitem.attachEvent("onmousewheel", MouseWheelHandler);
}

function MouseWheelHandler(e)
{
    // cross-browser wheel delta
    var e = window.event || e; // old IE support
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    return false;
}

简洁明了：

window.addEventListener("wheel", event => console.info(event.deltaY));

浏览器可能会返回不同的增量值（例如，Chrome返回

+120

（向上滚动）或

-120

（向下滚动）。规范化它的一个好方法是提取其符号，有效地将其转换为

+1

/

-1

：

window.addEventListener("wheel", event => {
    const delta = Math.sign(event.deltaY);
    console.info(delta);
});

---

参考：。

这也适用于Firefox、Chrome和Edge：

window.addEventListener("wheel", function(e) {
    var dir = Math.sign(e.deltaY);
    console.log(dir);
});

---

Chrome和IE支持，而Firefox支持。要跨浏览器进行监听，请参阅。添加到Derek的观点。在这些情况下，您应该真正评估浏览器的兼容性。您可以使用Modernizr（）来实现这一点。这将使您的生活更加轻松：）现在，根据MDN，所有现代桌面浏览器都支持此活动。回答非常好。需要更多的关注。关于这个问题有许多不完整的答案，这似乎是一个不推荐的事件，并且已从许多浏览器中删除。现在要使用的事件是“WheelEvent”（WheelEvent）（）。这对于较早的浏览器支持非常有用，特别是IE根本不支持Math.sign，但支持Math.max和Math.min。我更喜欢保留wheelDelta的绝对值来检测滚动的速度。在浏览器之间是否有任何公式来规范化这一点？不幸的是，如果您想使用绝对值，则没有公式。对于每个浏览器/操作系统组合，您必须依赖于某种带有经验值的表。对于普通的鼠标，

wheelDelta

总是固定的，不管你滚动的速度有多快，所以我可以按照上面的建议去做。然而，如果你想在一个轨迹板上捕捉灵敏度，比如（我想这就是你想要的），那你就是你自己的了。我们只希望这个值在将来跨浏览器实现标准化。这确实会在控制台中引发一个警报：

[Violation]将非被动事件侦听器添加到滚动阻止“wheel”事件中。将事件处理程序标记为“被动”以使页面更加响应。请参见

interest。我正在使用Chrome 68，没有看到此警报@DerkJanSpeelman您确定要测试与上面完全相同的代码吗？我刚刚尝试了两个版本（有和没有增量符号提取），但无法再现您看到的内容。我仍然无法在这里再现它。可能是不同的操作系统？我正在Ubuntu 18.04上试用。另外，您是否同时运行额外的代码？无论如何，MDN将第三个参数

{passive:true}

传递给

addEventListener（）

可以解决不需要

event.preventDefault（）

的问题。如果你这样做了，它看起来像是有（检查评论中抱怨的人）。