在JavaScript中监听鼠标滚动事件的两种方法及优化技巧
作者：Never_Satisfied
在网页制作中,监听鼠标滚动通常有两种含义：一是监听页面或元素的滚动（scroll 事件）,二是监听鼠标滚轮的具体操作（wheel 事件）,下面分别介绍这两种方法以及常见的优化技巧,需要的朋友可以参考下
引言
在网页制作中，监听鼠标滚动通常有两种含义：一是监听页面或元素的滚动（scroll 事件），二是监听鼠标滚轮的具体操作（wheel 事件）。下面分别介绍这两种方法以及常见的优化技巧。
1. 监听页面滚动（scroll 事件）
当用户滚动窗口或某个可滚动元素时，scroll 事件会被触发。适用于检测滚动位置、实现懒加载、吸顶效果等。
基本用法
// 监听整个窗口的滚动
window.addEventListener('scroll', function(event) {
console.log('页面滚动了');
// 获取滚动距离
console.log('scrollY:', window.scrollY); // 垂直滚动距离
console.log('scrollX:', window.scrollX); // 水平滚动距离
});
监听特定元素的滚动
const box = document.querySelector('.scrollable-box');
box.addEventListener('scroll', function() {
console.log('元素滚动了', box.scrollTop);
});
注意事项
scroll事件触发非常频繁，若在回调中执行复杂操作（如 DOM 操作、网络请求），可能导致性能问题。
解决方案：使用requestAnimationFrame或 节流（throttle） 来控制执行频率。
// 节流函数示例（使用 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 事件在用户滚动鼠标滚轮或触摸板滑动时触发，能获取滚动的方向、距离等详细信息，适用于自定义滚动效果、缩放等。
基本用法
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 事件（非标准），可用以下代码兼容：
document.addEventListener('mousewheel', function(event) {
// 类似 wheel，但属性可能不同
});
但现代浏览器均已支持 wheel 事件，一般无需兼容。
总结
| 场景 | 推荐事件 | 说明 |
|---|---|---|
| 检测滚动位置（视口/元素） | scroll | 适用于懒加载、导航栏变化等 |
| 检测滚轮滚动方向和力度 | wheel | 适用于自定义滚动、缩放、视差效果 |
两者都可以通过 addEventListener 绑定，并根据需要添加节流优化。
到此这篇关于在JavaScript中监听鼠标滚动事件的两种方法及优化技巧的文章就介绍到这了,更多相关JavaScript监听鼠标滚动事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！