在JavaScript / HTML中，监听鼠标滚动事件

在网页制作中，监听鼠标滚动通常有两种含义：一是监听页面或元素的滚动 （scroll 事件），二是监听鼠标滚轮的具体操作 （wheel 事件）。下面分别介绍这两种方法以及常见的优化技巧。

1. 监听页面滚动（scroll 事件）

当用户滚动窗口或某个可滚动元素时，scroll 事件会被触发。适用于检测滚动位置、实现懒加载、吸顶效果等。

基本用法

javascript 复制代码

// 监听整个窗口的滚动
window.addEventListener('scroll', function(event) {
    console.log('页面滚动了');
    // 获取滚动距离
    console.log('scrollY:', window.scrollY);   // 垂直滚动距离
    console.log('scrollX:', window.scrollX);   // 水平滚动距离
});

监听特定元素的滚动

javascript 复制代码

const box = document.querySelector('.scrollable-box');
box.addEventListener('scroll', function() {
    console.log('元素滚动了', box.scrollTop);
});

注意事项

scroll 事件触发非常频繁，若在回调中执行复杂操作（如 DOM 操作、网络请求），可能导致性能问题。
解决方案 ：使用 requestAnimationFrame 或 节流（throttle） 来控制执行频率。

javascript 复制代码

// 节流函数示例（使用 lodash 或自己实现）
function throttle(fn, delay) {
    let timer = null;
    return function(...args) {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, args);
                timer = null;
            }, delay);
        }
    };
}

window.addEventListener('scroll', throttle(() => {
    console.log('节流后的滚动处理');
}, 100));

2. 监听鼠标滚轮操作（wheel 事件）

wheel 事件在用户滚动鼠标滚轮或触摸板滑动时触发，能获取滚动的方向、距离等详细信息，适用于自定义滚动效果、缩放等。

基本用法

javascript 复制代码

window.addEventListener('wheel', function(event) {
    console.log('滚轮事件', event);
    // 滚轮方向
    console.log('deltaY:', event.deltaY); // 垂直滚动量（正数向下，负数向上）
    console.log('deltaX:', event.deltaX); // 水平滚动量
    console.log('deltaZ:', event.deltaZ);
    
    // 可阻止默认滚动行为（谨慎使用）
    // event.preventDefault();
}, { passive: false }); // 如果需要 preventDefault，必须设置 passive: false

注意

wheel 事件也是高频触发，同样建议节流。
现代浏览器中，wheel 事件的 passive 选项默认为 true（提升滚动性能），此时调用 preventDefault() 无效。若必须阻止默认行为，需显式设置 { passive: false }。

3. 旧版浏览器兼容（已很少用）

早期浏览器使用 mousewheel 事件（非标准），可用以下代码兼容：

javascript 复制代码

document.addEventListener('mousewheel', function(event) {
    // 类似 wheel，但属性可能不同
});

但现代浏览器均已支持 wheel 事件，一般无需兼容。

总结

场景	推荐事件	说明
检测滚动位置（视口/元素）	`scroll`	适用于懒加载、导航栏变化等
检测滚轮滚动方向和力度	`wheel`	适用于自定义滚动、缩放、视差效果

两者都可以通过 addEventListener 绑定，并根据需要添加节流优化。