首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript监听鼠标滚轮事件

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监听鼠标滚轮事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！