通过监听
wheel 事件获取鼠标滚轮数据，如 event.deltaY 表示垂直滚动量，addEventListener('wheel', callback) 可捕获API 获取鼠标滚轮事件详解
浏览器支持的滚轮事件类型
| 事件类型 | 适用浏览器 | 特点说明 |
|---|---|---|
wheel |
IE9+、Chrome、Firefox、Safari等 | W3C标准事件，推荐优先使用 |
mousewheel |
旧版Chrome、Safari、Opera | 非标准事件，部分浏览器已废弃 |
DOMMouseScroll |
旧版Firefox | Firefox专用事件，仅支持垂直滚动 |
现代标准事件：wheel
基础用法
// 监听元素滚轮事件
element.addEventListener('wheel', function(e) {
console.log('滚动方向：', e.deltaY > 0 ? '向下' : '向上');
console.log('滚动速度：', Math.abs(e.deltaY));
});
关键属性说明
| 属性名 | 类型 | 说明 |
|---|---|---|
deltaY |
Number | 垂直滚动量（像素单位，上滑为负，下滑为正） |
deltaX |
Number | 水平滚动量（像素单位，左滑为负，右滑为正） |
deltaMode |
Number | 滚动量单位（0=像素，1=行，2=页） |
跨浏览器兼容处理
function handleWheel(e) {
// 标准化滚动量单位为像素
let delta = e.deltaY;
if (e.deltaMode === 1) delta *= 40; // 行高换算（假设行高40px）
if (e.deltaMode === 2) delta *= 300; // 页面高度换算（假设页高300px）
console.log('标准化滚动量：', delta);
}
element.addEventListener('wheel', handleWheel, { passive: false });
传统事件处理（已废弃）
mousewheel事件
element.addEventListener('mousewheel', function(e) {
// Chrome/Safari特有属性
console.log('滚动方向：', e.wheelDelta > 0 ? '向上' : '向下');
}, false);
DOMMouseScroll事件
element.addEventListener('DOMMouseScroll', function(e) {
// Firefox特有属性
console.log('滚动方向：', e.detail > 0 ? '向下' : '向上');
}, false);
注意事项
- 事件冒泡：滚轮事件会冒泡，建议在目标元素或
document上监听 - 默认行为：需
e.preventDefault()阻止页面滚动，但会影响滚轮缩放功能 - 移动端替代：使用
touchmove事件处理触摸板滑动，需计算触摸点位移差值
相关问题与解答
Q1：如何区分上下滚动方向？
A：通过wheel事件的deltaY属性判断：
deltaY > 0：向下滚动deltaY < 0：向上滚动
Q2：如何阻止默认的滚轮滚动行为？
A：在事件回调中调用preventDefault()方法：
element.addEventListener('wheel', function(e) {
e.preventDefault(); // 阻止默认滚动行为
// 自定义滚动逻辑...
}, { passive: false }); // 必须设置passive为false
各位小伙伴们，我刚刚为大家分享了有关“api 获取鼠标滚轮”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
【版权声明】：本站所有内容均来自网络，若无意侵犯到您的权利，请及时与我们联系将尽快删除相关内容!
