Question

我想为mousewheel事件提供干净漂亮的JavaScript，只支持最新版本的常见浏览器，而不使用旧版本的代码，没有任何JS框架。

Mousewheel事件很好地解释了here。如何为当前最新版本的浏览器简化它？

我无权访问所有浏览器进行测试，因此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));

浏览器可能会返回不同的增量值（例如，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);
});

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

3 个答案: