脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery监听鼠标滚轮事件

使用jQuery监听鼠标滚轮的向上滑动和向下滑动事件

 更新时间：2026年05月08日 08:19:49   作者：detayun  
本文介绍了使用jQuery监听鼠标滚轮事件的方法,并提供了使用原生jQuery和jQuery插件（jQueryMouseWheel）实现轮播图切换的完整示例,需要的朋友可以参考下

在 Web 开发中，鼠标滚轮事件（wheel）常用于实现自定义滚动效果、轮播图切换、缩放元素等交互功能。虽然原生 JavaScript 可以轻松监听滚轮事件，但使用 jQuery 可以让代码更简洁、易读。本文将详细介绍如何使用 jQuery 监听鼠标滚轮的向上滑动和向下滑动事件，并提供完整的代码示例。

1. jQuery 监听鼠标滚轮事件

jQuery 本身没有直接提供 wheel 事件的封装，但我们可以使用 .on() 方法监听原生 DOM 事件，并结合 event.originalEvent 获取滚轮数据（如 deltaY）。

核心方法

$(document).on('wheel', function(event) {
    const deltaY = event.originalEvent.deltaY;
    if (deltaY < 0) {
        console.log('向上滚动');
        // 执行向上滚动的逻辑
    } else if (deltaY > 0) {
        console.log('向下滚动');
        // 执行向下滚动的逻辑
    }
});

说明

  • event.originalEvent 是 jQuery 包装的原生 DOM 事件对象，包含 deltaY、deltaX 等属性。
  • deltaY < 0 表示向上滚动，deltaY > 0 表示向下滚动。
  • 可以使用 event.preventDefault() 阻止默认滚动行为（如页面滚动）。

2. 完整示例：使用 jQuery 实现轮播图切换

假设我们希望在滚动鼠标滚轮时切换轮播图，并阻止页面默认滚动行为：

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="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 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</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 src="script.js"></script>
</body>
</html>

JavaScript（jQuery）逻辑

$(document).ready(function() {
    const $slides = $('.slide');
    let currentSlide = 0;

    // 初始化：只显示第一张幻灯片
    updateSlider();

    // 监听鼠标滚轮事件
    $(document).on('wheel', function(event) {
        // 阻止默认滚动行为
        event.preventDefault();

        const deltaY = event.originalEvent.deltaY;

        if (deltaY < 0) {
            // 向上滚动：上一张
            currentSlide = (currentSlide - 1 + $slides.length) % $slides.length;
        } else if (deltaY > 0) {
            // 向下滚动：下一张
            currentSlide = (currentSlide + 1) % $slides.length;
        }

        updateSlider();
    });

    function updateSlider() {
        $slides.each(function(index) {
            $(this).css('transform', `translateY(${(index - currentSlide) * 100}%)`);
        });
    }
});

代码解析

  1. HTML 结构：
    • 一个 .slider 容器，包含 3 张 .slide 幻灯片。
  2. CSS 样式：
    • 使用 position: absolute 堆叠幻灯片。
    • transition 实现平滑切换效果。
  3. 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 可能不同）
    const delta = event.originalEvent.deltaY || -event.originalEvent.wheelDelta;
    if (delta < 0) {
        console.log('向上滚动');
    } else if (delta > 0) {
        console.log('向下滚动');
    }
});

说明

  • mousewheel 事件的 wheelDelta 方向与 wheel 相反（wheelDelta > 0 向上，< 0 向下）。
  • 使用 deltaY || -wheelDelta 统一方向判断。

4. 实际应用场景

  1. 轮播图切换（如本文示例）。
  2. 滚动加载内容（如无限滚动列表）。
  3. 自定义滚动行为（如平滑滚动、视差效果）。
  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(); // 阻止默认滚动

        const deltaY = event.originalEvent.deltaY;

        if (deltaY < 0) {
            console.log('向上滚动');
            // 自定义逻辑（如切换上一张幻灯片）
        } else if (deltaY > 0) {
            console.log('向下滚动');
            // 自定义逻辑（如切换下一张幻灯片）
        }
    });
});

6. 扩展：使用 jQuery 插件简化滚轮事件

如果需要更复杂的滚轮交互，可以使用 jQuery 滚轮插件（如 jQuery Mouse Wheel），它提供了更统一的 API 和更好的兼容性。

安装

npm install jquery-mousewheel
# 或直接引入 CDN
<script src="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('向上滚动');
    } else if (delta < 0) {
        console.log('向下滚动');
    }
});

说明

  • delta > 0 表示向上滚动，delta < 0 表示向下滚动。
  • 插件已处理兼容性问题，无需额外标准化 delta 值。

7. 最终推荐方案

方案 1：原生 jQuery（推荐简单场景）

$(document).on('wheel', function(event) {
    const deltaY = event.originalEvent.deltaY;
    if (deltaY < 0) {
        console.log('向上滚动');
    } else if (deltaY > 0) {
        console.log('向下滚动');
    }
});

方案 2：jQuery Mouse Wheel 插件（推荐复杂场景）

$(document).mousewheel(function(event, delta) {
    if (delta > 0) {
        console.log('向上滚动');
    } else if (delta < 0) {
        console.log('向下滚动');
    }
});

8. 总结

  • jQuery 可以轻松监听 wheel 事件，并通过 event.originalEvent.deltaY 判断滚动方向。
  • 阻止默认滚动行为：使用 event.preventDefault()。
  • 兼容旧浏览器：可额外监听 mousewheel 或使用插件。
  • 推荐使用 jQuery Mouse Wheel 插件（如需更稳定的兼容性）。

以上就是使用jQuery监听鼠标滚轮的向上滑动和向下滑动事件的详细内容，更多关于jQuery监听鼠标滚轮事件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

最新评论