JavaScript监听鼠标滚轮(监听向上/向下滑动)事件的完整指南

在 Web 开发里，监听鼠标滚轮事件算是一个非常实用的技能——无论是做滚动加载、图片缩放，还是幻灯片切换，都离不开它。很多新手在接触这个功能时，往往会被 mousewheel 和 wheel 搞晕，或者不知道怎么判断向上还是向下。其实核心逻辑并不复杂，关键是抓住几个关键属性，然后根据场景灵活处理。下面就把这个事儿彻底捋清楚。

1. 鼠标滚轮事件的基本概念

现在的标准事件是 wheel，它在用户滚动鼠标滚轮时触发。相比老旧的 mousewheel，wheel 能提供更精细的数据——比如滚动方向、滚动距离，甚至支持触控板的平滑滚动。所以除非你需要兼容 IE 这种古董浏览器，否则直接上 wheel 就对了。

判断方向最关键的属性是 deltaY：

• deltaY > 0 → 向下滚动（或者向右，取决于设备设置，但绝大多数情况是向下）
• deltaY < 0 → 向上滚动

另外还有 deltaX（水平滚动）和 deltaZ（3D 滚轮），不过日常开发中基本用不上。

2. 基本实现：监听 wheel 事件

直接挂一个事件监听器，然后在回调里判断 deltaY 的正负值，就能区分方向了。代码非常精简：

document.addEventListener('wheel', (event) => {
    if (event.deltaY < 0) {
        console.log('向上滚动');
        // 执行向上滚动的逻辑
    } else if (event.deltaY > 0) {
        console.log('向下滚动');
        // 执行向下滚动的逻辑
    }
});

有几个细节需要注意：

• event.preventDefault() 可以阻止页面默认的滚动行为，但一定要谨慎——如果你禁用了滚动，用户可能无法正常浏览页面。通常只在自定义滚动容器或幻灯片场景下使用。
• 如果你确实需要兼容老掉牙的浏览器（比如 IE 11 以下），可以再额外监听 mousewheel 事件，不过现在大部分项目已经不需要了。

3. 完整示例：阻止默认滚动 + 自定义逻辑

来一个直观的例子：假设我们用滚轮切换一个幻灯片，并且不希望页面跟着滚动。这里用三个简单的 div 模拟幻灯片，通过 translateY 实现切换动画。直接上可运行的 HTML：

    
    
    
    


    

        
Slide 1
        
Slide 2
        
Slide 3
    
    

代码拆解一下：

1. HTML 结构：一个 .slider 容器，内部堆叠了三张 .slide 幻灯片，利用 position: absolute 让它们重叠。
2. CSS 动画：给每个幻灯片加了 transition: transform 0.5s ease，切换时就有平滑过渡效果。
3. Ja vaScript 逻辑：wheel 事件里先 event.preventDefault() 拦下页面滚动，然后根据 deltaY 更新 currentSlide，最后调用 updateSlider() 通过 translateY 偏移来实现显示哪一张。

这个示例可以直接复制到本地跑一下，效果还是挺直观的。

4. 兼容性处理

既然提到了兼容性，就多说一句。如果你确实需要支持 IE 或一些老版本的 Edge，可以同时监听 mousewheel（注意 mousewheel 的 wheelDelta 方向与 deltaY 相反，数值也需要标准化）：

document.addEventListener('wheel', handleWheel);
document.addEventListener('mousewheel', handleWheel); // 旧浏览器兼容

function handleWheel(event) {
    // 标准化 deltaY（mousewheel 的 wheelDelta 方向相反）
    const delta = event.deltaY || -event.wheelDelta;
    if (delta < 0) {
        console.log('向上滚动');
    } else if (delta > 0) {
        console.log('向下滚动');
    }
}

不过说真的，除非你的项目要兼容 IE10 以下，否则直接只用 wheel 完全够用了——现在主流浏览器都已经支持得很好了。

5. 实际应用场景

除了上面演示的幻灯片切换，滚轮事件还能用在很多地方：

• 无限滚动加载：比如微博、抖音那种往下滑就自动加载更多内容。
• 缩放元素：地图、图片查看器里经常用滚轮放大缩小。
• 自定义滚动条：一些轻量级的滚动容器会自己接管滚动逻辑。
• 视差滚动效果：页面滚动时不同元素以不同速度移动，制造空间感。

每个场景的实现细节可能有差别，但判断方向的核心思路都是一样的。

6. 总结

• 用 addEventListener('wheel', callback) 监听滚轮事件。
• 通过 event.deltaY 的正负判断方向：负值向上，正值向下。
• 需要阻止默认滚动时，调用 event.preventDefault()，但注意不要滥用。
• 如果需要兼容老浏览器，可以额外监听 mousewheel，但推荐在新项目中直接使用标准 wheel 事件。

最后给一个最简洁的核心代码片段，方便直接复制使用：

document.addEventListener('wheel', (event) => {
    if (event.deltaY < 0) {
        console.log('向上滚动');
        // 自定义逻辑（如切换上一张幻灯片）
    } else if (event.deltaY > 0) {
        console.log('向下滚动');
        // 自定义逻辑（如切换下一张幻灯片）
    }
});