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

在 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.deltaY0){console.log(向上滚动);// 执行向上滚动的逻辑}elseif(event.deltaY0){console.log(向下滚动);// 执行向下滚动的逻辑}});说明event.preventDefault()可以阻止默认滚动行为如页面滚动但需谨慎使用否则会影响用户体验。如果需要兼容旧浏览器如 IE可以同时监听mousewheel事件但现代浏览器已弃用。3. 完整示例阻止默认滚动 自定义逻辑假设我们希望在滚动时阻止页面默认滚动并执行自定义逻辑如切换幻灯片!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title鼠标滚轮事件示例/titlestylebody{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/headbodydivclasssliderdivclassslidestylebackground-color:#ffcccc;Slide 1/divdivclassslidestylebackground-color:#ccffcc;Slide 2/divdivclassslidestylebackground-color:#ccccff;Slide 3/div/divscriptconstslidesdocument.querySelectorAll(.slide);letcurrentSlide0;// 初始化只显示第一张幻灯片updateSlider();document.addEventListener(wheel,(event){// 阻止默认滚动行为event.preventDefault();if(event.deltaY0){// 向上滚动上一张currentSlide(currentSlide-1slides.length)%slides.length;}elseif(event.deltaY0){// 向下滚动下一张currentSlide(currentSlide1)%slides.length;}updateSlider();});functionupdateSlider(){slides.forEach((slide,index){slide.style.transformtranslateY(${(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){// 标准化 deltaYmousewheel 的 delta 可能不同constdeltaevent.deltaY||-event.wheelDelta;// mousewheel 的 wheelDelta 方向相反if(delta0){console.log(向上滚动);}elseif(delta0){console.log(向下滚动);}}5. 实际应用场景滚动加载内容如无限滚动列表。缩放元素如地图、图片查看器。切换幻灯片/轮播图如本文示例。自定义滚动行为如平滑滚动、视差效果。6. 总结使用addEventListener(wheel, callback)监听鼠标滚轮事件。通过event.deltaY判断滚动方向 0向上 0向下。可使用event.preventDefault()阻止默认滚动行为。兼容旧浏览器时可额外监听mousewheel但不推荐。完整代码推荐document.addEventListener(wheel,(event){if(event.deltaY0){console.log(向上滚动);// 自定义逻辑如切换上一张幻灯片}elseif(event.deltaY0){console.log(向下滚动);// 自定义逻辑如切换下一张幻灯片}});希望本文能帮助你掌握 JavaScript 鼠标滚轮事件的使用如果有任何问题欢迎在评论区讨论 。