当前位置：首页 > JavaScript

js实现滚轮事件

2026-02-03 01:05:53JavaScript

监听滚轮事件的基本方法

在JavaScript中，可以通过addEventListener来监听滚轮事件。主要使用wheel事件，它提供了更详细的控制和跨浏览器兼容性。

element.addEventListener('wheel', function(event) {
    // 处理滚轮事件
    console.log(event.deltaY); // 垂直滚动量
    console.log(event.deltaX); // 水平滚动量
});

获取滚轮方向

event.deltaY表示垂直滚动量，正值表示向下滚动，负值表示向上滚动。event.deltaX表示水平滚动量。

element.addEventListener('wheel', function(event) {
    if (event.deltaY > 0) {
        console.log('向下滚动');
    } else {
        console.log('向上滚动');
    }
});

阻止默认滚动行为

如果需要阻止页面的默认滚动行为（例如实现自定义滚动效果），可以调用event.preventDefault()。

js实现滚轮事件

element.addEventListener('wheel', function(event) {
    event.preventDefault();
    // 自定义滚动逻辑
});

兼容旧版浏览器

对于旧版浏览器（如IE），可以使用mousewheel事件，但需要注意event.wheelDelta的值与wheel事件不同。

element.addEventListener('mousewheel', function(event) {
    var direction = event.wheelDelta > 0 ? '向上滚动' : '向下滚动';
    console.log(direction);
});

平滑滚动效果

结合CSS的scroll-behavior: smooth和JavaScript可以实现平滑滚动效果。

js实现滚轮事件

element.addEventListener('wheel', function(event) {
    event.preventDefault();
    window.scrollBy({
        top: event.deltaY * 0.5, // 调整滚动速度
        behavior: 'smooth'
    });
});

自定义滚动逻辑

通过监听滚轮事件并手动控制滚动位置，可以实现更复杂的交互效果。

let scrollPosition = 0;
element.addEventListener('wheel', function(event) {
    event.preventDefault();
    scrollPosition += event.deltaY * 0.5;
    element.scrollTop = scrollPosition;
});

性能优化

频繁触发滚轮事件可能导致性能问题，可以使用requestAnimationFrame或防抖（debounce）技术优化。

let ticking = false;
element.addEventListener('wheel', function(event) {
    if (!ticking) {
        requestAnimationFrame(function() {
            // 处理滚动逻辑
            ticking = false;
        });
        ticking = true;
    }
});