快捷導(dǎo)航

在JavaScript中監(jiān)聽鼠標(biāo)滾動(dòng)事件的兩種方法及優(yōu)化技巧

更新時(shí)間：2026年03月19日 08:24:10 作者：Never_Satisfied

在網(wǎng)頁(yè)制作中,監(jiān)聽鼠標(biāo)滾動(dòng)通常有兩種含義：一是監(jiān)聽頁(yè)面或元素的滾動(dòng)（scroll?事件）,二是監(jiān)聽鼠標(biāo)滾輪的具體操作（wheel?事件）,下面分別介紹這兩種方法以及常見的優(yōu)化技巧,需要的朋友可以參考下

引言

在網(wǎng)頁(yè)制作中，監(jiān)聽鼠標(biāo)滾動(dòng)通常有兩種含義：一是監(jiān)聽頁(yè)面或元素的滾動(dòng)（scroll 事件），二是監(jiān)聽鼠標(biāo)滾輪的具體操作（wheel 事件）。下面分別介紹這兩種方法以及常見的優(yōu)化技巧。

1. 監(jiān)聽頁(yè)面滾動(dòng)（scroll 事件）

當(dāng)用戶滾動(dòng)窗口或某個(gè)可滾動(dòng)元素時(shí)，scroll 事件會(huì)被觸發(fā)。適用于檢測(cè)滾動(dòng)位置、實(shí)現(xiàn)懶加載、吸頂效果等。

基本用法

// 監(jiān)聽整個(gè)窗口的滾動(dòng)
window.addEventListener('scroll', function(event) {
    console.log('頁(yè)面滾動(dòng)了');
    // 獲取滾動(dòng)距離
    console.log('scrollY:', window.scrollY);   // 垂直滾動(dòng)距離
    console.log('scrollX:', window.scrollX);   // 水平滾動(dòng)距離
});

監(jiān)聽特定元素的滾動(dòng)

const box = document.querySelector('.scrollable-box');
box.addEventListener('scroll', function() {
    console.log('元素滾動(dòng)了', box.scrollTop);
});

注意事項(xiàng)

scroll 事件觸發(fā)非常頻繁，若在回調(diào)中執(zhí)行復(fù)雜操作（如 DOM 操作、網(wǎng)絡(luò)請(qǐng)求），可能導(dǎo)致性能問題。
解決方案：使用 requestAnimationFrame 或 節(jié)流（throttle） 來控制執(zhí)行頻率。

// 節(jié)流函數(shù)示例（使用 lodash 或自己實(shí)現(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é)流后的滾動(dòng)處理');
}, 100));

2. 監(jiān)聽鼠標(biāo)滾輪操作（wheel 事件）

wheel 事件在用戶滾動(dòng)鼠標(biāo)滾輪或觸摸板滑動(dòng)時(shí)觸發(fā)，能獲取滾動(dòng)的方向、距離等詳細(xì)信息，適用于自定義滾動(dòng)效果、縮放等。

基本用法

window.addEventListener('wheel', function(event) {
    console.log('滾輪事件', event);
    // 滾輪方向
    console.log('deltaY:', event.deltaY); // 垂直滾動(dòng)量（正數(shù)向下，負(fù)數(shù)向上）
    console.log('deltaX:', event.deltaX); // 水平滾動(dòng)量
    console.log('deltaZ:', event.deltaZ);
    
    // 可阻止默認(rèn)滾動(dòng)行為（謹(jǐn)慎使用）
    // event.preventDefault();
}, { passive: false }); // 如果需要 preventDefault，必須設(shè)置 passive: false

注意

wheel 事件也是高頻觸發(fā)，同樣建議節(jié)流。
現(xiàn)代瀏覽器中，wheel 事件的 passive 選項(xiàng)默認(rèn)為 true（提升滾動(dòng)性能），此時(shí)調(diào)用 preventDefault() 無效。若必須阻止默認(rèn)行為，需顯式設(shè)置 { passive: false }。

3. 舊版瀏覽器兼容（已很少用）

早期瀏覽器使用 mousewheel 事件（非標(biāo)準(zhǔn)），可用以下代碼兼容：

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

但現(xiàn)代瀏覽器均已支持 wheel 事件，一般無需兼容。

總結(jié)

場(chǎng)景	推薦事件	說明
檢測(cè)滾動(dòng)位置（視口/元素）	`scroll`	適用于懶加載、導(dǎo)航欄變化等
檢測(cè)滾輪滾動(dòng)方向和力度	`wheel`	適用于自定義滾動(dòng)、縮放、視差效果

兩者都可以通過 addEventListener 綁定，并根據(jù)需要添加節(jié)流優(yōu)化。

到此這篇關(guān)于在JavaScript中監(jiān)聽鼠標(biāo)滾動(dòng)事件的兩種方法及優(yōu)化技巧的文章就介紹到這了,更多相關(guān)JavaScript監(jiān)聽鼠標(biāo)滾動(dòng)事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: