js实现滚轮

监听滚轮事件

在JavaScript中，可以通过addEventListener监听wheel事件来捕获滚轮动作。该事件会在用户滚动鼠标滚轮时触发，提供滚动方向和速度等信息。

window.addEventListener('wheel', function(event) {
    console.log(event.deltaY); // 垂直滚动量（正值向下，负值向上）
    console.log(event.deltaX); // 水平滚动量（正值向右，负值向左）
});

阻止默认滚动行为

如果需要自定义滚动效果（如横向滚动或缩放），可以通过event.preventDefault()阻止默认的页面滚动行为：

window.addEventListener('wheel', function(event) {
    event.preventDefault();
    // 自定义逻辑（如横向滚动）
    window.scrollBy(event.deltaY, 0); // 将垂直滚动转为水平滚动
}, { passive: false }); // 必须设置passive为false才能调用preventDefault

平滑滚动实现

使用window.scrollTo或Element.scrollTo实现平滑滚动效果，通过behavior: 'smooth'启用动画：

const button = document.getElementById('scrollButton');
button.addEventListener('click', () => {
    window.scrollTo({
        top: 1000, // 目标位置
        behavior: 'smooth'
    });
});

自定义滚动动画

通过requestAnimationFrame实现更复杂的滚动动画，例如缓动效果：

function smoothScrollTo(targetY, duration = 1000) {
    const startY = window.scrollY;
    const distance = targetY - startY;
    let startTime = null;

    function animation(currentTime) {
        if (!startTime) startTime = currentTime;
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);
        window.scrollTo(0, startY + distance * easeInOutCubic(progress));
        if (progress < 1) requestAnimationFrame(animation);
    }

    function easeInOutCubic(t) {
        return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
    }

    requestAnimationFrame(animation);
}

// 调用示例
smoothScrollTo(500);

横向滚动容器

对于横向滚动的容器（如图库），监听滚轮事件并修改容器的scrollLeft属性：

const gallery = document.getElementById('horizontalGallery');
gallery.addEventListener('wheel', (event) => {
    event.preventDefault();
    gallery.scrollLeft += event.deltaY; // 垂直滚轮控制横向滚动
});

兼容性注意事项

• 部分旧浏览器可能使用mousewheel事件而非wheel，可通过以下代码兼容：

  const eventName = 'onwheel' in document ? 'wheel' : 'mousewheel';
  element.addEventListener(eventName, handler);

• 触摸板手势可能触发高频率的微小deltaY值，需在逻辑中增加阈值判断。