js实现滚轮

监听滚轮事件

在JavaScript中，可以通过addEventListener监听wheel事件来捕获滚轮动作。该事件会返回一个包含滚轮方向信息的事件对象。

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

获取滚轮方向

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

element.addEventListener('wheel', function(event) {
    console.log('垂直滚动量:', event.deltaY);
    console.log('水平滚动量:', event.deltaX);
});

阻止默认滚轮行为

在某些场景下可能需要阻止页面的默认滚动行为，可以通过event.preventDefault()实现。

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

平滑滚动效果

使用window.scrollTo或element.scrollTo方法可以实现平滑滚动效果，通过设置behavior: 'smooth'启用。

window.scrollTo({
    top: 1000,
    behavior: 'smooth'
});

自定义滚动速度

通过控制滚动步长和时间间隔，可以自定义滚动速度。以下示例使用requestAnimationFrame实现平滑滚动。

function smoothScroll(element, target, duration) {
    let start = element.scrollTop;
    let startTime = null;

    function animation(currentTime) {
        if (!startTime) startTime = currentTime;
        let timeElapsed = currentTime - startTime;
        let run = ease(timeElapsed, start, target - start, duration);
        element.scrollTop = run;
        if (timeElapsed < duration) requestAnimationFrame(animation);
    }

    function ease(t, b, c, d) {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
    }

    requestAnimationFrame(animation);
}

兼容性处理

对于旧版浏览器，可能需要使用mousewheel或DOMMouseScroll事件进行兼容处理。

element.addEventListener('mousewheel', handleWheel);
element.addEventListener('DOMMouseScroll', handleWheel);

function handleWheel(event) {
    let delta = event.wheelDelta || -event.detail;
    if (delta > 0) {
        console.log('向上滚动');
    } else {
        console.log('向下滚动');
    }
}

性能优化

频繁的滚轮事件可能影响性能，可以通过节流（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));