当前位置：首页 > news >正文

JavaScript 鼠标滚轮事件详解：监听向上/向下滑动

news 2026/5/7 18:13:48

在 Web 开发中，监听鼠标滚轮事件（wheel）可以实现许多交互效果，例如滚动加载内容、缩放元素、切换幻灯片等。本文将详细介绍如何使用 JavaScript 监听鼠标滚轮的向上滑动和向下滑动事件，并提供完整的代码示例。

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

鼠标滚轮事件（wheel）在用户滚动鼠标滚轮时触发。与传统的mousewheel事件不同，wheel是现代浏览器的标准事件，支持更精细的滚轮数据（如deltaY）。

关键属性

deltaY：表示垂直滚动的方向和距离。
- deltaY > 0：向下滚动（或向右滚动，取决于设备）。
- deltaY < 0：向上滚动（或向左滚动）。
deltaX：表示水平滚动的方向和距离（较少使用）。
deltaZ：表示 3D 滚轮的滚动（较少使用）。

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

我们可以使用addEventListener监听wheel事件，并通过event.deltaY判断滚动方向。

示例代码

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

说明

event.preventDefault()可以阻止默认滚动行为（如页面滚动），但需谨慎使用，否则会影响用户体验。
如果需要兼容旧浏览器（如 IE），可以同时监听mousewheel事件（但现代浏览器已弃用）。

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

假设我们希望在滚动时阻止页面默认滚动，并执行自定义逻辑（如切换幻灯片）：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>鼠标滚轮事件示例</title><style>body{height:200vh;/* 模拟长页面 */margin:0;display:flex;justify-content:center;align-items:center;font-family:Arial,sans-serif;}.slider{width:500px;height:300px;background-color:#f0f0f0;border-radius:8px;display:flex;justify-content:center;align-items:center;font-size:24px;position:relative;overflow:hidden;}.slide{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;transition:transform 0.5s ease;}</style></head><body><divclass="slider"><divclass="slide"style="background-color:#ffcccc;">Slide 1</div><divclass="slide"style="background-color:#ccffcc;">Slide 2</div><divclass="slide"style="background-color:#ccccff;">Slide 3</div></div><script>constslides=document.querySelectorAll('.slide');letcurrentSlide=0;// 初始化：只显示第一张幻灯片updateSlider();document.addEventListener('wheel',(event)=>{// 阻止默认滚动行为event.preventDefault();if(event.deltaY<0){// 向上滚动：上一张currentSlide=(currentSlide-1+slides.length)%slides.length;}elseif(event.deltaY>0){// 向下滚动：下一张currentSlide=(currentSlide+1)%slides.length;}updateSlider();});functionupdateSlider(){slides.forEach((slide,index)=>{slide.style.transform=`translateY(${(index-currentSlide)*100}%)`;});}</script></body></html>

代码解析

HTML 结构：
- 一个.slider容器，包含 3 张.slide幻灯片。
CSS 样式：
- 使用position: absolute堆叠幻灯片。
- transition实现平滑切换效果。
JavaScript 逻辑：
- 监听wheel事件，阻止默认滚动（event.preventDefault()）。
- 根据deltaY判断滚动方向，更新currentSlide索引。
- updateSlider()函数通过transform: translateY()切换幻灯片。

4. 兼容性处理

虽然wheel是现代标准，但旧浏览器（如 IE）可能不支持。如果需要兼容，可以同时监听mousewheel（但推荐仅在必要时使用）：

document.addEventListener('wheel',handleWheel);document.addEventListener('mousewheel',handleWheel);// 旧浏览器兼容functionhandleWheel(event){// 标准化 deltaY（mousewheel 的 delta 可能不同）constdelta=event.deltaY||-event.wheelDelta;// mousewheel 的 wheelDelta 方向相反if(delta<0){console.log('向上滚动');}elseif(delta>0){console.log('向下滚动');}}

5. 实际应用场景

滚动加载内容（如无限滚动列表）。
缩放元素（如地图、图片查看器）。
切换幻灯片/轮播图（如本文示例）。
自定义滚动行为（如平滑滚动、视差效果）。

6. 总结

使用addEventListener('wheel', callback)监听鼠标滚轮事件。
通过event.deltaY判断滚动方向（< 0向上，> 0向下）。
可使用event.preventDefault()阻止默认滚动行为。
兼容旧浏览器时，可额外监听mousewheel（但不推荐）。

完整代码（推荐）

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