JavaScript监听鼠标滚轮(监听向上/向下滑动)事件的完整指南
更新时间：2026年05月07日 15:58:52 作者：detayun
本文介绍了如何在Web开发中利用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.deltaY < 0) {
console.log('向上滚动');
// 执行向上滚动的逻辑
} else if (event.deltaY > 0) {
console.log('向下滚动');
// 执行向下滚动的逻辑
}
});
说明
event.preventDefault()可以阻止默认滚动行为（如页面滚动），但需谨慎使用，否则会影响用户体验。- 如果需要兼容旧浏览器（如 IE），可以同时监听
mousewheel事件（但现代浏览器已弃用）。
3. 完整示例：阻止默认滚动 + 自定义逻辑
假设我们希望在滚动时阻止页面默认滚动，并执行自定义逻辑（如切换幻灯片）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="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>
<div class="slider">
<div class="slide" style="background-color: #ffcccc;">Slide 1</div>
<div class="slide" style="background-color: #ccffcc;">Slide 2</div>
<div class="slide" style="background-color: #ccccff;">Slide 3</div>
</div>
<script>
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;
// 初始化：只显示第一张幻灯片
updateSlider();
document.addEventListener('wheel', (event) => {
// 阻止默认滚动行为
event.preventDefault();
if (event.deltaY < 0) {
// 向上滚动：上一张
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
} else if (event.deltaY > 0) {
// 向下滚动：下一张
currentSlide = (currentSlide + 1) % slides.length;
}
updateSlider();
});
function updateSlider() {
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); // 旧浏览器兼容
function handleWheel(event) {
// 标准化 deltaY（mousewheel 的 delta 可能不同）
const delta = event.deltaY || -event.wheelDelta; // mousewheel 的 wheelDelta 方向相反
if (delta < 0) {
console.log('向上滚动');
} else if (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('向上滚动');
// 自定义逻辑（如切换上一张幻灯片）
} else if (event.deltaY > 0) {
console.log('向下滚动');
// 自定义逻辑（如切换下一张幻灯片）
}
});
到此这篇关于JavaScript监听鼠标滚轮(监听向上/向下滑动)事件的完整指南的文章就介绍到这了,更多相关JavaScript监听鼠标滚轮事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了通过扫小程序码实现网站登陆功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
这篇文章主要介绍了如何在不联网或离线环境下安装npm依赖,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2025-01-01
3级省地市级联菜单，ie/ff 测试通过，支持多个并存，支持事件2010-02-02
非jQuery实现照片散落桌子上，单击放大的LightBox效果
本文给大家介绍一款js实现的照片散落桌子上点击放大图片的LightBox效果，非常的炫酷，而且是非jQuery实现的，有需要的小伙伴可以参考下2014-11-11
文章系统阐述了JavaScript中Symbol的特性与应用,包括其作为第七种原始数据类型、唯一性、不可变性、全局注册表、内置Symbol值等核心概念,感兴趣的朋友一起看看吧2025-07-07
javascript setTimeout和setInterval计时的区别详解
window对象有两个主要的定时方法，分别是setTimeout 和 setInteval 他们的语法基本上相同，但是完成的功能取有区别。2013-06-06
HTML5之WebSocket入门3 -通信模型socket.io
socket.io能为程序员提供客户端和服务端一致的编程体验，socket.io支持任何的浏览器，任何的Mobile设备。下面通过本篇文章给大家讲解HTML5之WebSocket入门3 -通信模型socket.io，需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JavaScript设计模式发布订阅模式，发布订阅设计模式是和观察者设计模式基本上相同，但是他们两个设计模式不同的是发布订阅者拥有一个事件处理中心而观察者并没有2022-06-06
比较详细的实例分析了dom的一些常用方法2008-09-09
这篇文章主要介绍了ECMAScript6中Map/WeakMap详解的相关资料,需要的朋友可以参考下2015-06-06
最新评论