js滚轮事件怎么监听？js鼠标滚轮事件兼容性处理

在 Web 开发中，处理鼠标滚轮事件（Mouse Wheel Event）是构建自定义滚动条、视差滚动效果或无限加载列表的核心技术，由于历史原因，浏览器对滚轮事件的支持经历了从专有属性到标准 DOM 事件的演变,因此理解其底层机制对于编写兼容且高性能的代码至关重要。

事件类型的演变与兼容性

早期浏览器使用非标准的 mousewheel 事件，而现代浏览器主要遵循 W3C 标准的 wheel 事件，为了确保代码在不同环境下的稳定性，开发者通常需要同时监听这两个事件，或者使用现代浏览器推荐的 wheel 事件并配合 Polyfill 处理旧版 IE 浏览器。

事件对象中的关键属性

当滚轮事件触发时，事件对象（Event Object）中包含了判断滚动方向和滚动量的关键属性，不同事件类型下，这些属性的名称有所不同,这是开发者最容易混淆的地方。

在标准的 wheel 事件中,主要关注以下三个属性：

1. deltaMode：表示 deltaX、deltaY 和 deltaZ 的单位。
   • 0：像素（pixels）。
   • 1：行（lines）。
   • 2：页（pages）。
2. deltaX：水平滚动量。
3. deltaY：垂直滚动量。
4. deltaZ：深度滚动量（通常用于 3D 鼠标或触控板）。

而在旧的 mousewheel 事件中，使用的是 wheelDelta 属性：

• wheelDelta：表示滚动的距离，正值表示向上滚动，负值表示向下滚动，在 Chrome 和 Safari 中，值为 120 的倍数；在 Firefox 中，该属性不存在，需使用 detail 属性（正值为向下，负值为向上）。

滚动方向的判断逻辑

由于不同浏览器返回的数值符号相反，直接判断 deltaY > 0 是否代表向上滚动是不可靠的，最稳健的做法是结合 deltaMode 和 wheelDelta 进行综合判断,或者统一转换为像素单位后再进行比较。

以下是一个通用的判断逻辑示例：

阻止默认滚动行为与性能优化

在实现自定义滚动逻辑时，开发者常调用 event.preventDefault() 来阻止浏览器默认的页面滚动行为，频繁调用此方法可能会影响页面性能,特别是在移动端或高分辨率屏幕上。

现代浏览器引入了 passive 选项来优化滚动性能，如果开发者确定不会调用 preventDefault()，可以将事件监听器设置为 passive: true，这允许浏览器提前进行滚动优化,提升页面响应速度。

实际应用场景示例：自定义平滑滚动容器

以下代码展示了一个简单的自定义滚动容器实现，它拦截了原生滚轮事件,并根据配置项进行平滑滚动处理。

const scrollContainer = document.getElementById('scroll-container'); scrollContainer.addEventListener('wheel', (event) => { // 阻止默认滚动行为 event.preventDefault(); // 获取滚动距离，考虑 deltaMode let delta = event.deltaY; if (event.deltaMode === 1) delta = 40; if (event.deltaMode === 2) delta = 800; // 平滑滚动到目标位置 scrollContainer.scrollTop += delta; }, { passive: false });

需要注意的是，passive: false 是调用 preventDefault() 的必要条件，否则浏览器可能会忽略 preventDefault() 并记录警告。

相关问题与解答

问题 1：为什么在 Chrome 中 wheelDelta 的值是 120 的倍数，而在 Firefox 中却是 detail 属性？

解答：

这是历史遗留问题。wheelDelta 是微软在 Internet Explorer 中引入的非标准属性，后来被 Chrome 和 Safari 等基于 WebKit/Blink 内核的浏览器采纳，而 Firefox 遵循了不同的非标准实现，使用 detail 属性，其单位是“行”，且符号相反（正值为向下滚动），随着 W3C 推出标准的 wheel 事件，现代浏览器统一使用 deltaY 等属性，但为了兼容旧代码，开发者仍需注意这些差异，建议在现代开发中优先使用 wheel 事件及其标准属性。

问题 2：在移动端设备上，wheel 事件是否有效？如果不有效，应该使用什么事件替代？

解答：

在大多数现代移动浏览器中，wheel 事件可能被触发，但其行为可能与桌面端不同，且触控板的滚动与手指滑动在事件模型上存在差异，对于纯移动端的手指滑动，更推荐使用 touchstart、touchmove 和 touchend 事件组合来处理，如果需要统一的滚动体验，可以使用 Pointer Events API（pointerdown、pointermove、pointerup），它同时支持鼠标、触控笔和触控板,提供了更一致的跨设备输入处理机制。