使用 jQuery 实现鼠标滚轮事件：监听向上/向下滑动
在 Web 开发中，鼠标滚轮事件（wheel）常用于实现自定义滚动效果、轮播图切换、缩放元素等交互功能。虽然原生 JavaScript 可以轻松监听滚轮事件，但使用jQuery可以让代码更简洁、易读。本文将详细介绍如何使用 jQuery 监听鼠标滚轮的向上滑动和向下滑动事件，并提供完整的代码示例。
1. jQuery 监听鼠标滚轮事件
jQuery 本身没有直接提供wheel事件的封装，但我们可以使用.on()方法监听原生 DOM 事件，并结合event.originalEvent获取滚轮数据（如deltaY）。
核心方法
$(document).on('wheel',function(event){constdeltaY=event.originalEvent.deltaY;if(deltaY<0){console.log('向上滚动');// 执行向上滚动的逻辑}elseif(deltaY>0){console.log('向下滚动');// 执行向下滚动的逻辑}});说明
event.originalEvent是 jQuery 包装的原生 DOM 事件对象，包含deltaY、deltaX等属性。deltaY < 0表示向上滚动，deltaY > 0表示向下滚动。- 可以使用
event.preventDefault()阻止默认滚动行为（如页面滚动）。
2. 完整示例：使用 jQuery 实现轮播图切换
假设我们希望在滚动鼠标滚轮时切换轮播图，并阻止页面默认滚动行为：
HTML 结构
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>jQuery 鼠标滚轮事件示例</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><!-- 引入 jQuery --><scriptsrc="https://code.jquery.com/jquery-3.6.0.min.js"></script></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><scriptsrc="script.js"></script></body></html>JavaScript（jQuery）逻辑
$(document).ready(function(){const$slides=$('.slide');letcurrentSlide=0;// 初始化：只显示第一张幻灯片updateSlider();// 监听鼠标滚轮事件$(document).on('wheel',function(event){// 阻止默认滚动行为event.preventDefault();constdeltaY=event.originalEvent.deltaY;if(deltaY<0){// 向上滚动：上一张currentSlide=(currentSlide-1+$slides.length)%$slides.length;}elseif(deltaY>0){// 向下滚动：下一张currentSlide=(currentSlide+1)%$slides.length;}updateSlider();});functionupdateSlider(){$slides.each(function(index){$(this).css('transform',`translateY(${(index-currentSlide)*100}%)`);});}});代码解析
- HTML 结构：
- 一个
.slider容器，包含 3 张.slide幻灯片。
- 一个
- CSS 样式：
- 使用
position: absolute堆叠幻灯片。 transition实现平滑切换效果。
- 使用
- jQuery 逻辑：
$(document).ready()确保 DOM 加载完成后执行代码。$(document).on('wheel', callback)监听滚轮事件。event.originalEvent.deltaY获取滚动方向。updateSlider()函数通过css('transform')切换幻灯片。
3. 兼容性处理
虽然现代浏览器都支持wheel事件，但旧浏览器（如 IE）可能使用mousewheel。如果需要兼容，可以额外监听mousewheel：
$(document).on('wheel mousewheel',function(event){// 标准化 deltaY（mousewheel 的 delta 可能不同）constdelta=event.originalEvent.deltaY||-event.originalEvent.wheelDelta;if(delta<0){console.log('向上滚动');}elseif(delta>0){console.log('向下滚动');}});说明
mousewheel事件的wheelDelta方向与wheel相反（wheelDelta > 0向上，< 0向下）。- 使用
deltaY || -wheelDelta统一方向判断。
4. 实际应用场景
- 轮播图切换（如本文示例）。
- 滚动加载内容（如无限滚动列表）。
- 自定义滚动行为（如平滑滚动、视差效果）。
- 缩放元素（如图片查看器、地图）。
5. 总结
- jQuery 监听滚轮事件：使用
$(document).on('wheel', callback)。 - 获取滚动方向：通过
event.originalEvent.deltaY判断（< 0向上，> 0向下）。 - 阻止默认滚动：使用
event.preventDefault()。 - 兼容旧浏览器：可额外监听
mousewheel并标准化delta值。
完整代码（推荐）
$(document).ready(function(){$(document).on('wheel',function(event){event.preventDefault();// 阻止默认滚动constdeltaY=event.originalEvent.deltaY;if(deltaY<0){console.log('向上滚动');// 自定义逻辑（如切换上一张幻灯片）}elseif(deltaY>0){console.log('向下滚动');// 自定义逻辑（如切换下一张幻灯片）}});});6. 扩展：使用 jQuery 插件简化滚轮事件
如果需要更复杂的滚轮交互，可以使用jQuery 滚轮插件（如 jQuery Mouse Wheel），它提供了更统一的 API 和更好的兼容性。
安装
npminstalljquery-mousewheel# 或直接引入 CDN<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>使用示例
$(document).mousewheel(function(event,delta){if(delta>0){console.log('向上滚动');}elseif(delta<0){console.log('向下滚动');}});说明
delta > 0表示向上滚动，delta < 0表示向下滚动。- 插件已处理兼容性问题，无需额外标准化
delta值。
7. 最终推荐方案
方案 1：原生 jQuery（推荐简单场景）
$(document).on('wheel',function(event){constdeltaY=event.originalEvent.deltaY;if(deltaY<0){console.log('向上滚动');}elseif(deltaY>0){console.log('向下滚动');}});方案 2：jQuery Mouse Wheel 插件（推荐复杂场景）
$(document).mousewheel(function(event,delta){if(delta>0){console.log('向上滚动');}elseif(delta<0){console.log('向下滚动');}});8. 总结
- jQuery 可以轻松监听
wheel事件，并通过event.originalEvent.deltaY判断滚动方向。 - 阻止默认滚动行为：使用
event.preventDefault()。 - 兼容旧浏览器：可额外监听
mousewheel或使用插件。 - 推荐使用 jQuery Mouse Wheel 插件（如需更稳定的兼容性）。
希望本文能帮助你掌握jQuery 鼠标滚轮事件的使用！如果有任何问题，欢迎在评论区讨论 🚀。