我想为鼠标滚轮事件使用干净漂亮的 JavaScript，只支持最新版本的常见浏览器，没有过时版本的遗留代码，没有任何 JS 框架。
这里很好地解释了鼠标滚轮事件。如何为当前最新版本的浏览器简化它？
我无法访问所有浏览器来测试它，所以caniuse.com对我有很大帮助。唉，那里没有提到鼠标滚轮。
根据德里克的评论，我写了这个解决方案。它对所有浏览器都有效吗？
someObject.addEventListener("onwheel" in document ? "wheel" : "mousewheel", function(e) {
e.wheel = e.deltaY ? -e.deltaY : e.wheelDelta/40;
// custom code
});
干净简单：
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。
这是一篇描述这一点的文章，并给出了一个例子：
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;
}
这也适用于 Firefox、Chrome 和 Edge：
window.addEventListener("wheel", function(e) {
var dir = Math.sign(e.deltaY);
console.log(dir);
});