当前位置：首页 > 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()：

$('#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）：

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 中实现全屏功能可以通过浏览器提供的 Fullscreen API 来实现。以下是几种常见的实现方式：使用原生 Fullscreen API 通过调用 Ele…

vue实现拖拽事件

Vue 实现拖拽事件的方法使用 HTML5 原生拖拽 API HTML5 提供了原生的拖拽 API，可以通过 draggable 属性、dragstart、dragend、dragover 和 dr…

vue如何实现事件处理

Vue 事件处理基础 Vue 通过 v-on 指令（简写为 @）实现事件绑定。语法格式为 @事件名="处理函数"，处理函数需在 Vue 实例的 methods 中定义。 <template…

vue实现点击左键事件

在Vue中实现点击左键事件 Vue提供了@click指令来监听鼠标左键点击事件，这是最常见的实现方式。以下是在Vue中实现点击左键事件的方法：模板中使用@click指令 <button @…

react如何事件代理

React 中的事件代理 React 通过合成事件（SyntheticEvent）实现了事件代理机制。合成事件是对原生 DOM 事件的跨浏览器封装，所有事件都委托到顶层容器（通常是 document…

react如何触发resize事件

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

jquery滚轮事件