当前位置：首页 > JavaScript

js实现滚轮事件

2026-03-16 01:38:53JavaScript

监听滚轮事件的基本方法

在JavaScript中，可以通过addEventListener来监听滚轮事件。常见的事件类型包括wheel、mousewheel（已废弃）和DOMMouseScroll（Firefox专用，已废弃）。现代浏览器推荐使用wheel事件。

element.addEventListener('wheel', function(event) {
    console.log('滚轮事件触发', event.deltaY);
});

获取滚轮方向

wheel事件对象中的deltaY属性表示垂直方向的滚动量，正值表示向下滚动，负值表示向上滚动。deltaX表示水平方向的滚动量。

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

阻止默认行为

在某些情况下，可能需要阻止滚轮的默认行为（如页面滚动），可以通过event.preventDefault()实现。

element.addEventListener('wheel', function(event) {
    event.preventDefault();
    console.log('阻止默认滚动行为');
});

平滑滚动效果

通过监听滚轮事件并手动控制滚动位置，可以实现自定义的平滑滚动效果。

let scrollPosition = 0;
const scrollSpeed = 10;

element.addEventListener('wheel', function(event) {
    event.preventDefault();
    scrollPosition += event.deltaY > 0 ? scrollSpeed : -scrollSpeed;
    element.scrollTo(0, scrollPosition);
});

兼容性处理

虽然wheel事件是现代浏览器的标准，但如果需要支持旧版浏览器，可以结合mousewheel和DOMMouseScroll事件。

function handleWheel(event) {
    const delta = event.deltaY || event.wheelDelta || -event.detail;
    console.log('滚动量:', delta);
}

element.addEventListener('wheel', handleWheel);
element.addEventListener('mousewheel', handleWheel); // 旧版浏览器
element.addEventListener('DOMMouseScroll', handleWheel); // Firefox旧版

性能优化

频繁触发滚轮事件可能导致性能问题，可以通过节流（throttle）或防抖（debounce）来优化。

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function() {
        const context = this;
        const args = arguments;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}

element.addEventListener('wheel', throttle(function(event) {
    console.log('节流后的滚轮事件');
}, 100));

自定义滚轮行为

通过监听滚轮事件，可以实现自定义的交互效果，如缩放、旋转等。

js实现滚轮事件

let scale = 1;
element.addEventListener('wheel', function(event) {
    event.preventDefault();
    scale += event.deltaY * -0.01;
    scale = Math.min(Math.max(0.5, scale), 2);
    element.style.transform = `scale(${scale})`;
});