上一篇
JS鼠标滑轮滚动代码怎么写？js监听鼠标滚轮事件
在Web开发中,实现自定义滚动条或增强原生滚动体验时，监听鼠标滑轮事件（wheel 或 mousewheel）是核心环节，以下将详细解析如何通过JavaScript捕获滑轮事件并驱动容器滚动，同时涵盖兼容性处理、性能优化及代码实现细节。
事件选择与兼容性处理
现代浏览器主要使用 wheel 事件，而旧版IE浏览器使用 mousewheel 事件，为了确保代码的广泛兼容性，通常需要在初始化时检测浏览器支持的事件类型。
| 事件名称 | 适用浏览器 | 说明 |
|---|---|---|
| wheel | Chrome, Firefox, Safari, Edge, IE9+ | 现代标准事件，提供 deltaY 属性，数值更精确。 |
| mousewheel | IE8及以下, 旧版Chrome/Safari | 旧版事件，提供 wheelDelta 属性，数值方向与 deltaY 相反。 |
| DOMMouseScroll | 旧版Firefox | 仅Firefox旧版本使用，现已逐渐被废弃。 |
核心逻辑与代码实现
实现滚动的核心逻辑是：监听容器或文档的滑轮事件，获取滚动增量，修改容器的 scrollTop 属性，并阻止默认行为（如页面整体滚动）以防止冲突。
// 获取目标容器元素 const scrollContainer = document.getElementById('myScrollContainer'); // 初始化事件监听 function initScrollHandler() { // 检测支持的事件类型 const isIE = document.all && !window.atob; // 简单判断IE const eventName = isIE ? 'mousewheel' : 'wheel'; scrollContainer.addEventListener(eventName, handleWheel, { passive: false }); } // 滑轮事件处理函数 function handleWheel(e) { // 阻止默认滚动行为，防止页面整体滚动 e.preventDefault(); // 获取滚动增量 // deltaY 是标准属性，wheelDelta 是旧版IE属性 let delta = 0; if (e.deltaY !== undefined) { delta = e.deltaY; } else if (e.wheelDelta !== undefined) { // wheelDelta 向上为正，向下为负；deltaY 相反 delta = -e.wheelDelta / 40; } // 执行滚动 // scrollTop 增加表示向下滚动，减少表示向上滚动 scrollContainer.scrollTop += delta; } // 启动 initScrollHandler();
关键参数解析
在实现过程中,理解事件对象中的关键属性至关重要，这决定了滚动的方向和速度。
| 属性名 | 所属事件 | 含义 | 典型值说明 |
|---|---|---|---|
| deltaY | wheel | Y轴滚动增量 | 正值表示向下滚动，负值表示向上滚动。 |
| wheelDelta | mousewheel
| 滚动幅度 | 正值表示向上滚动，负值表示向下滚动。 |
| preventDefault() | 两者 | 阻止默认行为 | 必须调用，否则会导致浏览器默认滚动与自定义滚动冲突。 |
| passive: false | 两者 | 允许阻止默认行为 | 现代浏览器中，若监听器标记为 passive: true，则无法调用 preventDefault()，因此需显式设为 false。 |
性能优化与平滑滚动
直接修改 scrollTop 会导致滚动生硬，且高频触发事件可能引起性能问题，建议采用以下优化策略：
- 节流（Throttling）：限制事件处理函数的执行频率，避免每毫秒都计算滚动位置。
- 平滑滚动（Smooth Scrolling）：使用 requestAnimationFrame 或 CSS scroll-behavior: smooth 实现动画效果。
- 使用 scrollTo 方法：相比直接赋值 scrollTop，scrollTo 在某些浏览器中支持平滑过渡。
// 使用 requestAnimationFrame 实现平滑滚动优化 let isScrolling = false; function smoothScroll(e) { if (isScrolling) return; isScrolling = true; e.preventDefault(); const delta = e.deltaY || -e.wheelDelta / 40; const targetScroll = scro
llContainer.scrollTop + delta; // 使用 requestAnimationFrame 进行平滑过渡 requestAnimationFrame(() => { scrollContainer.scrollTo({ top: targetScroll, behavior: 'smooth' }); // 重置标志位，允许下一次滚动 setTimeout(() => { isScrolling = false; }, 100); }); }
常见问题与解答
为什么在Chrome浏览器中，即使调用了 preventDefault()，页面仍然会滚动？
解答：
这通常是因为事件监听器被标记为 passive: true，现代浏览器为了提升滚动性能，默认将 touchstart 和 wheel 事件标记为 passive，这意味着监听器无法调用 preventDefault()，解决方法是在添加事件监听器时显式设置 { passive: false }，element.addEventListener('wheel', handler, { passive: false })。
如何区分鼠标滑轮是“快速滚动”还是“慢速滚动”，以便调整滚动距离？
解答：
可以通过检测 deltaY 的绝对值或结合 e.detail（Firefox）来判断滚动的剧烈程度，更常见的做法是保持固定的滚动步长，或者根据内容类型动态调整，如果需要区分，可以设置阈值：
const threshold = 100; // 阈值 if (Math.abs(e.deltaY) > threshold) { // 快速滚动，增加滚动距离 scrollContainer.scrollTop += e.deltaY 2; } else { // 慢速滚动，正常滚动 scrollContainer.scrollTop += e.deltaY; }
注意：不同设备和浏览器的滑轮精度不同，建议在实际项目中通过测试确定合适的阈值和乘数。
