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

Question

我想为mousewheel事件提供干净,漂亮的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

这是一篇描述这个的文章,并给出了一个例子:

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 2

这在2018年更清洁:

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

浏览器可能会为delta返回不同的值(例如,Chrome返回+120(向上滚动)或-120向下滚动.规范化它的一个很好的技巧是提取其符号,有效地将其转换为+1/ -1:

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

参考:MDN.

Answer 3

这也可以在Firefox，Chrome和Edge中使用：

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