在 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">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">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监听鼠标滚轮事件内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
声明：本站（华域联盟www.cnhackhy.com）所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)