当前位置：首页 > jquery

jquery滚轮事件

2026-02-04 00:51:12jquery

jQuery 滚轮事件监听

jQuery本身没有直接提供滚轮事件监听方法，但可以通过原生JavaScript的wheel事件或第三方插件实现。

原生JavaScript的wheel事件

通过jQuery绑定原生wheel事件，兼容现代浏览器：

$(element).on('wheel', function(event) {
    // 阻止默认行为（如页面滚动）
    event.preventDefault();

    // 获取滚动方向
    const delta = event.originalEvent.deltaY;
    if (delta > 0) {
        console.log('向下滚动');
    } else if (delta < 0) {
        console.log('向上滚动');
    }
});

使用mousewheel插件

对于老旧浏览器或需要更精细控制的情况，可引入jquery-mousewheel插件：

引入插件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

监听事件：

jquery滚轮事件

$(element).on('mousewheel', function(event) {
 // 阻止默认行为
 event.preventDefault();

 // delta值判断方向
 if (event.deltaY > 0) {
     console.log('向下滚动');
 } else {
     console.log('向上滚动');
 }
});

注意事项

事件冒泡：滚轮事件可能触发多次，建议用event.stopPropagation()控制。
性能优化：高频触发的滚轮事件建议使用节流（throttle）或防抖（debounce）。
移动端兼容：移动设备需额外处理touchmove事件。

示例：节流实现

let throttleTimer;
$(window).on('wheel', function(event) {
    if (!throttleTimer) {
        throttleTimer = setTimeout(() => {
            console.log('节流处理滚动');
            throttleTimer = null;
        }, 200);
    }
    event.preventDefault();
});