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

您可能感兴趣的文章:

JS实现图片轮播效果实例详解【可自动和手动】
这篇文章主要介绍了JS实现图片轮播效果,结合完整实例形式分析了javascript可自动和手动轮播图的原理、布局与轮播功能相关实现技巧,需要的朋友可以参考下
2019-04-04
JS禁止查看网页源代码的实现方法
本文给大家介绍js如何禁止查看网页源代码，并给大家分享了三种查看路径的方法，本文给大家介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-10-10
JS实现仿中关村论坛评分后弹出提示效果的方法
这篇文章主要介绍了JS实现仿中关村论坛评分后弹出提示效果的方法,实例分析了javascript弹出特效的css与提示框的具体实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
JavaScript代码简化技巧实例解析
这篇文章主要介绍了JavaScript代码简化技巧实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
拥抱模块化的JavaScript
模块化JavaScript的概念尤为强烈，似乎有赶超07年Ajax风潮之趋势
2012-03-03
微信域名检测接口调用演示步骤（含PHP、Python）
这篇文章主要介绍了微信域名检测接口调用演示步骤（含PHP、Python），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
JS 判断代码全收集
js判断代码，比较全，大家可以看下代码，熟悉常见判断代码。
2009-04-04
从理论角度讨论JavaScript闭包
本文将介绍一个在JavaScript经常会拿来讨论的话题 —— 闭包（closure）。闭包其实已经是个老生常谈的话题了；有大量文章都介绍过闭包的内容，尽管如此，这里还是要试着从理论角度来讨论下闭包，看看ECMAScript中的闭包内部究竟是如何工作的
2019-04-04
JS在数组头部添加元素的3种方法
JS数组是一种特殊的对象,JS没有真正的数组,只是用对象模拟数组,下面这篇文章主要给大家介绍了关于JS在数组头部添加元素的3种方法,需要的朋友可以参考下
2023-10-10
js 原生判断内容区域是否滚动到底部的实例代码
下面笔者就为大家分享一篇js 原生判断内容区域是否滚动到底部的实例代码，具有很好的参考价值，希望对大家有所帮助
2017-11-11