当前位置：首页 > jquery

jquery滚轮事件

2026-03-16 21:37:10jquery

jQuery 滚轮事件监听方法

使用 jQuery 监听鼠标滚轮事件可以通过 mousewheel 或 wheel 事件实现。不同浏览器对滚轮事件的命名可能不同，需注意兼容性处理。

基本事件绑定语法：

$(element).on('mousewheel wheel', function(event) {
    // 事件处理逻辑
});

获取滚轮方向

通过事件对象的 originalEvent.deltaY 或 originalEvent.detail 属性判断滚轮方向：

$(window).on('mousewheel wheel', function(e) {
    var delta = e.originalEvent.deltaY || e.originalEvent.detail;
    if (delta > 0) {
        console.log('向下滚动');
    } else {
        console.log('向上滚动');
    }
});

阻止默认滚轮行为

需要阻止页面默认滚动时，使用 preventDefault()：

jquery滚轮事件

$('#scrollArea').on('wheel', function(e) {
    e.preventDefault();
    // 自定义滚动逻辑
});

平滑滚动实现

结合滚轮事件实现自定义平滑滚动效果：

var scrolling = false;
$(window).on('mousewheel wheel', function(e) {
    if (!scrolling) {
        scrolling = true;
        var delta = e.originalEvent.deltaY || 0;
        $('html, body').stop().animate({
            scrollTop: $(window).scrollTop() + (delta * 50)
        }, 800, function() {
            scrolling = false;
        });
        e.preventDefault();
    }
});

兼容性注意事项

旧版 Firefox 使用 DOMMouseScroll 事件，需额外绑定：
```
$(element).on('DOMMouseScroll', handler);
```

某些浏览器使用 detail 值判断方向（Firefox）：

jquery滚轮事件

var delta = e.originalEvent.detail ? -e.originalEvent.detail : e.originalEvent.wheelDelta;

移动端触摸屏没有滚轮事件，需使用 touchstart 和 touchmove 事件模拟。

常用插件推荐

jQuery Mousewheel：专门处理跨浏览器滚轮事件

$('#element').mousewheel(function(event) {
 console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

jQuery scrollTo：实现复杂滚动效果
```
$.scrollTo(target, duration, options);
```

标签: 滚轮事件

分享给朋友：

vue事件实现原理

Vue 事件实现原理 Vue 的事件系统基于发布-订阅模式，通过 $on、$emit 等方法实现组件间通信。以下是核心实现原理的分解：事件注册与存储 Vue 实例内部通过 _events 对象存储…

vue实现后退事件

监听浏览器后退事件在Vue中可以通过window.onpopstate或beforeRouteLeave路由守卫实现后退事件监听。以下是两种常用方法：方法一：使用window.onpopstat…

vue实现关闭页面事件

Vue 实现页面关闭事件在 Vue 中监听页面关闭事件，可以通过 beforeunload 或 unload 事件实现。以下是几种常见方法：方法一：使用 window.addEventListe…

vue前端实现双击事件

在 Vue 中实现双击事件 Vue 提供了多种方式来实现双击事件，以下是几种常见的方法：使用 @dblclick 指令 Vue 内置了 @dblclick 指令，可以直接绑定双击事件： <…

react事件如何传值

通过事件参数传递在React中，事件处理函数会自动接收一个事件对象作为参数。可以通过该对象访问事件相关信息，例如目标元素的值或属性。 function handleChange(event) {…

react如何触发resize事件

监听窗口 resize 事件在 React 中监听窗口的 resize 事件，可以通过 useEffect 钩子实现。在组件挂载时添加事件监听器，并在卸载时移除。 import React, {…

jquery滚轮事件