在JavaScript中監(jiān)聽鼠標滾動事件的兩種方法及優(yōu)化技巧
更新時間：2026年03月19日 08:24:10 作者：Never_Satisfied
在網(wǎng)頁制作中,監(jiān)聽鼠標滾動通常有兩種含義：一是監(jiān)聽頁面或元素的滾動（scroll?事件）,二是監(jiān)聽鼠標滾輪的具體操作（wheel?事件）,下面分別介紹這兩種方法以及常見的優(yōu)化技巧,需要的朋友可以參考下
引言
在網(wǎng)頁制作中，監(jiān)聽鼠標滾動通常有兩種含義：一是監(jiān)聽頁面或元素的滾動（scroll 事件），二是監(jiān)聽鼠標滾輪的具體操作（wheel 事件）。下面分別介紹這兩種方法以及常見的優(yōu)化技巧。
1. 監(jiān)聽頁面滾動（scroll 事件）
當用戶滾動窗口或某個可滾動元素時，scroll 事件會被觸發(fā)。適用于檢測滾動位置、實現(xiàn)懶加載、吸頂效果等。
基本用法
// 監(jiān)聽整個窗口的滾動
window.addEventListener('scroll', function(event) {
console.log('頁面滾動了');
// 獲取滾動距離
console.log('scrollY:', window.scrollY); // 垂直滾動距離
console.log('scrollX:', window.scrollX); // 水平滾動距離
});
監(jiān)聽特定元素的滾動
const box = document.querySelector('.scrollable-box');
box.addEventListener('scroll', function() {
console.log('元素滾動了', box.scrollTop);
});
注意事項
scroll事件觸發(fā)非常頻繁，若在回調中執(zhí)行復雜操作（如 DOM 操作、網(wǎng)絡請求），可能導致性能問題。
解決方案：使用requestAnimationFrame或 節(jié)流（throttle） 來控制執(zhí)行頻率。
// 節(jié)流函數(shù)示例（使用 lodash 或自己實現(xiàn)）
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('節(jié)流后的滾動處理');
}, 100));
2. 監(jiān)聽鼠標滾輪 操作（wheel 事件）
wheel 事件在用戶滾動鼠標滾輪或觸摸板滑動時觸發(fā)，能獲取滾動的方向、距離等詳細信息，適用于自定義滾動效果、縮放等。
基本用法
window.addEventListener('wheel', function(event) {
console.log('滾輪事件', event);
// 滾輪方向
console.log('deltaY:', event.deltaY); // 垂直滾動量（正數(shù)向下，負數(shù)向上）
console.log('deltaX:', event.deltaX); // 水平滾動量
console.log('deltaZ:', event.deltaZ);
// 可阻止默認滾動行為（謹慎使用）
// event.preventDefault();
}, { passive: false }); // 如果需要 preventDefault，必須設置 passive: false
注意
wheel事件也是高頻觸發(fā)，同樣建議節(jié)流。- 現(xiàn)代瀏覽器中，
wheel事件的passive選項默認為true（提升滾動性能），此時調用preventDefault()無效。若必須阻止默認行為，需顯式設置{ passive: false }。
3. 舊版瀏覽器兼容（已很少用）
早期瀏覽器使用 mousewheel 事件（非標準），可用以下代碼兼容：
document.addEventListener('mousewheel', function(event) {
// 類似 wheel，但屬性可能不同
});
但現(xiàn)代瀏覽器均已支持 wheel 事件，一般無需兼容。
總結
| 場景 | 推薦事件 | 說明 |
|---|---|---|
| 檢測滾動位置（視口/元素） | scroll | 適用于懶加載、導航欄變化等 |
| 檢測滾輪滾動方向和力度 | wheel | 適用于自定義滾動、縮放、視差效果 |
兩者都可以通過 addEventListener 綁定，并根據(jù)需要添加節(jié)流優(yōu)化。
到此這篇關于在JavaScript中監(jiān)聽鼠標滾動事件的兩種方法及優(yōu)化技巧的文章就介紹到這了,更多相關JavaScript監(jiān)聽鼠標滾動事件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了Bootstrap字體圖標無法正常顯示的解決方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
解決webpack dev-server不能匹配post請求的問題
這篇文章主要介紹了解決webpack不能匹配post請求的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了JS 數(shù)組基本用法,結合實例形式分析了JavaScript數(shù)組的定義、初始化、賦值、打印等相關操作技巧,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了JS限制文本框只能輸入數(shù)字和字母方法,本文給出了限制只能輸入數(shù)字、限制只能輸入字母、限制只能輸入數(shù)字和字母3種腳本,需要的朋友可以參考下2015-02-02
利用BootStrap的Carousel.js實現(xiàn)輪播圖動畫效果
這篇文章主要介紹了利用BootStrap的Carousel.js實現(xiàn)輪播圖動畫效果的相關資料,需要的朋友可以參考下2016-12-12
IE8中動態(tài)創(chuàng)建script標簽onload無效的解決方法
這篇文章主要介紹了IE8中動態(tài)創(chuàng)建script標簽onload無效的解決方法,涉及針對javascript加載順序的調整,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
小圖整合在一張大圖里，然后在不同的CSS里調用同一張圖片，以此來減少請求數(shù)，這是頁面優(yōu)化最常用的手段，但IE6會對頁面里同一個圖片，只要在不同的地方有引用到就會重新請求一次，需要加JS代碼解決。2010-07-07
這篇文章主要介紹了EditPlus 正則表達式 實戰(zhàn)(3)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細介紹了一款開源的移動端腳本框架Hammer.js,可以完美的實現(xiàn)在移端開發(fā)的大多數(shù)事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript實現(xiàn)隨機產(chǎn)生字符串的方法分享
這篇文章主要為大家詳細介紹了JavaScript中實現(xiàn)隨機產(chǎn)生字符串的方法，文中的示例代碼簡潔易懂，對我們學習JavaScript有一定的幫助，需要的可以參考一下2022-11-11