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

Question

我想为鼠标滚轮事件提供干净和漂亮的 JavaScript，只支持最新版本的通用浏览器，没有旧版本的遗留代码，没有任何 JS 框架。

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

我无法访问所有浏览器来测试它，所以caniuse.com对我有很大帮助。唉，那里没有提到鼠标滚轮。

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

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

Answer 1

干净简单：

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

浏览器可能会为 delta 返回不同的值（例如，Chrome 返回+120(scroll up) 或-120(scroll down)。标准化它的一个好技巧是提取其符号，有效地将其转换为+1/ -1：

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

参考：MDN。

Answer 2

这是一篇描述这一点的文章，并给出了一个例子：

http://www.sitepoint.com/html5-javascript-mouse-wheel/

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

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;
}

Answer 3

这也适用于 Firefox、Chrome 和 Edge：

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