api 获取鼠标滚轮

API 获取鼠标滚轮事件详解

浏览器支持的滚轮事件类型

现代标准事件：wheel

基础用法

// 监听元素滚轮事件
element.addEventListener('wheel', function(e) {
  console.log('滚动方向：', e.deltaY > 0 ? '向下' : '向上');
  console.log('滚动速度：', Math.abs(e.deltaY));
});

关键属性说明

跨浏览器兼容处理

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);

注意事项

1. 事件冒泡：滚轮事件会冒泡，建议在目标元素或document上监听
2. 默认行为：需e.preventDefault()阻止页面滚动，但会影响滚轮缩放功能
3. 移动端替代：使用touchmove事件处理触摸板滑动，需计算触摸点位移差值

相关问题与解答

Q1：如何区分上下滚动方向？

A：通过wheel事件的deltaY属性判断：

• deltaY > 0：向下滚动
• deltaY < 0：向上滚动

Q2：如何阻止默认的滚轮滚动行为？

A：在事件回调中调用preventDefault()方法：

element.addEventListener('wheel', function(e) {
  e.preventDefault(); // 阻止默认滚动行为
  // 自定义滚动逻辑...
}, { passive: false }); // 必须设置passive为false

各位小伙伴们，我刚刚为大家分享了有关“api 获取鼠标滚轮”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！