js滚轮事件有三个事件方法。这三个方法在指定的浏览器或版本使用。
DOMMousescroll、 MozMousePixelScrollmousewheelwheelGecko 是套开放原始码的、以 C++ 编写的网页排版引擎。由 Mozilla 家族网页浏览器以及 Netscape 6 以后版本 浏览器所使用。这软件原本是由网景通讯公司开发的，现在则由 Mozilla 基金会维护。
Gecko 是跨平台的，能在 Microsoft Windows、Linux 和 Mac OS X 等主要操作系统上运行。
Gecko 为第 2 个最流行的排版引擎，仅次于 Trident（用于 Windows 版的 Internet Explorer）。
滚轮事件的兼容性分为两个方向：
火狐浏览器滚轮事件用DOMMousescroll，非火狐浏览器事件使用mousewheel事件。
非标准事件用mousewheel，标准事件用wheel。标准事件最低支持edge浏览器，如果不考虑IE浏览器，可以直接使用wheel事件来编写日常的需求。
注意： 非标准事件已经被弃用，在未来的浏览器中被删除。
function wheel(callback) {
// 是否火狐浏览器
if (navigator.userAgent.indexOf("Firefox") == -1) {
// 非火狐浏览器
// document.addEventListener 兼容写法。
// 考虑兼容性，使用了非标准的mousewheel事件
if (document.attachEvent) {
document.attachEvent("onmousewheel", fn);
} else {
document.addEventListener("mousewheel", fn);
}
} else {
// 火狐浏览器
document.addEventListener("DOMMouseScroll", fn);
}
function fn(ev) {
var oEvent = ev || event;
// wheelDelta 非火狐浏览器 向上120 向下-120
// detail 火狐浏览器 向上-3 向下3
if (oEvent.wheelDelta) {
if (oEvent.wheelDelta >= 120) {
callback && callback(true);
} else {
callback && callback(false);
}
} else {
if (oEvent.detail >= 3) {
callback && callback(false);
} else {
callback && callback(true);
}
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<script>
function wheel(callback) {
if (navigator.userAgent.indexOf("Firefox") == -1) {
if (document.attachEvent) {
document.attachEvent("onmousewheel", fn);
} else {
document.addEventListener("mousewheel", fn);
}
} else {
document.addEventListener("DOMMouseScroll", fn);
}
function fn(ev) {
var oEvent = ev || event;
if (oEvent.wheelDelta) {
if (oEvent.wheelDelta >= 120) {
callback && callback(true);
} else {
callback && callback(false);
}
} else {
if (oEvent.detail >= 3) {
callback && callback(false);
} else {
callback && callback(true);
}
}
}
}
// 调用
wheel(function (bool) {
console.log(bool);
});
</script>
</body>
</html>