快捷導(dǎo)航

JavaScript監(jiān)聽鼠標(biāo)滾輪(監(jiān)聽向上/向下滑動(dòng))事件的完整指南

更新時(shí)間：2026年05月07日 15:58:52 作者：detayun

本文介紹了如何在Web開發(fā)中利用JavaScript監(jiān)聽鼠標(biāo)滾輪事件實(shí)現(xiàn)交互效果,如內(nèi)容滾動(dòng)加載,元素縮放和幻燈片切換,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下

在 Web 開發(fā)中，監(jiān)聽鼠標(biāo)滾輪事件（wheel）可以實(shí)現(xiàn)許多交互效果，例如滾動(dòng)加載內(nèi)容、縮放元素、切換幻燈片等。本文將詳細(xì)介紹如何使用 JavaScript 監(jiān)聽鼠標(biāo)滾輪的向上滑動(dòng)和向下滑動(dòng)事件，并提供完整的代碼示例。

1. 鼠標(biāo)滾輪事件的基本概念

鼠標(biāo)滾輪事件（wheel）在用戶滾動(dòng)鼠標(biāo)滾輪時(shí)觸發(fā)。與傳統(tǒng)的 mousewheel 事件不同，wheel 是現(xiàn)代瀏覽器的標(biāo)準(zhǔn)事件，支持更精細(xì)的滾輪數(shù)據(jù)（如 deltaY）。

關(guān)鍵屬性

deltaY：表示垂直滾動(dòng)的方向和距離。
- deltaY > 0：向下滾動(dòng)（或向右滾動(dòng)，取決于設(shè)備）。
- deltaY < 0：向上滾動(dòng)（或向左滾動(dòng)）。
deltaX：表示水平滾動(dòng)的方向和距離（較少使用）。
deltaZ：表示 3D 滾輪的滾動(dòng)（較少使用）。

2. 基本實(shí)現(xiàn)：監(jiān)聽wheel事件

我們可以使用 addEventListener 監(jiān)聽 wheel 事件，并通過 event.deltaY 判斷滾動(dòng)方向。

示例代碼

document.addEventListener('wheel', (event) => {
    if (event.deltaY < 0) {
        console.log('向上滾動(dòng)');
        // 執(zhí)行向上滾動(dòng)的邏輯
    } else if (event.deltaY > 0) {
        console.log('向下滾動(dòng)');
        // 執(zhí)行向下滾動(dòng)的邏輯
    }
});

說明

event.preventDefault() 可以阻止默認(rèn)滾動(dòng)行為（如頁面滾動(dòng)），但需謹(jǐn)慎使用，否則會(huì)影響用戶體驗(yàn)。
如果需要兼容舊瀏覽器（如 IE），可以同時(shí)監(jiān)聽 mousewheel 事件（但現(xiàn)代瀏覽器已棄用）。

3. 完整示例：阻止默認(rèn)滾動(dòng) + 自定義邏輯

假設(shè)我們希望在滾動(dòng)時(shí)阻止頁面默認(rèn)滾動(dòng)，并執(zhí)行自定義邏輯（如切換幻燈片）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠標(biāo)滾輪事件示例</title>
    <style>
        body {
            height: 200vh; /* 模擬長(zhǎng)頁面 */
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
        }
        .slider {
            width: 500px;
            height: 300px;
            background-color: #f0f0f0;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            position: relative;
            overflow: hidden;
        }
        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.5s ease;
        }
    </style>
</head>
<body>
    <div class="slider">
        <div class="slide" style="background-color: #ffcccc;">Slide 1</div>
        <div class="slide" style="background-color: #ccffcc;">Slide 2</div>
        <div class="slide" style="background-color: #ccccff;">Slide 3</div>
    </div>
    <script>
        const slides = document.querySelectorAll('.slide');
        let currentSlide = 0;
        // 初始化：只顯示第一張幻燈片
        updateSlider();
        document.addEventListener('wheel', (event) => {
            // 阻止默認(rèn)滾動(dòng)行為
            event.preventDefault();
            if (event.deltaY < 0) {
                // 向上滾動(dòng)：上一張
                currentSlide = (currentSlide - 1 + slides.length) % slides.length;
            } else if (event.deltaY > 0) {
                // 向下滾動(dòng)：下一張
                currentSlide = (currentSlide + 1) % slides.length;
            }
            updateSlider();
        });
        function updateSlider() {
            slides.forEach((slide, index) => {
                slide.style.transform = `translateY(${(index - currentSlide) * 100}%)`;
            });
        }
    </script>
</body>
</html>

代碼解析

HTML 結(jié)構(gòu)：一個(gè) .slider 容器，包含 3 張 .slide 幻燈片。
CSS 樣式：
- 使用 position: absolute 堆疊幻燈片。
- transition 實(shí)現(xiàn)平滑切換效果。
JavaScript 邏輯：
- 監(jiān)聽 wheel 事件，阻止默認(rèn)滾動(dòng)（event.preventDefault()）。
- 根據(jù) deltaY 判斷滾動(dòng)方向，更新 currentSlide 索引。
- updateSlider() 函數(shù)通過 transform: translateY() 切換幻燈片。

4. 兼容性處理

雖然 wheel 是現(xiàn)代標(biāo)準(zhǔn)，但舊瀏覽器（如 IE）可能不支持。如果需要兼容，可以同時(shí)監(jiān)聽 mousewheel（但推薦僅在必要時(shí)使用）：

document.addEventListener('wheel', handleWheel);
document.addEventListener('mousewheel', handleWheel); // 舊瀏覽器兼容

function handleWheel(event) {
    // 標(biāo)準(zhǔn)化 deltaY（mousewheel 的 delta 可能不同）
    const delta = event.deltaY || -event.wheelDelta; // mousewheel 的 wheelDelta 方向相反

    if (delta < 0) {
        console.log('向上滾動(dòng)');
    } else if (delta > 0) {
        console.log('向下滾動(dòng)');
    }
}

5. 實(shí)際應(yīng)用場(chǎng)景

滾動(dòng)加載內(nèi)容（如無限滾動(dòng)列表）。
縮放元素（如地圖、圖片查看器）。
切換幻燈片/輪播圖（如本文示例）。
自定義滾動(dòng)行為（如平滑滾動(dòng)、視差效果）。

6. 總結(jié)

使用 addEventListener('wheel', callback) 監(jiān)聽鼠標(biāo)滾輪事件。
通過 event.deltaY 判斷滾動(dòng)方向（< 0 向上，> 0 向下）。
可使用 event.preventDefault() 阻止默認(rèn)滾動(dòng)行為。
兼容舊瀏覽器時(shí)，可額外監(jiān)聽 mousewheel（但不推薦）。

完整代碼（推薦）

document.addEventListener('wheel', (event) => {
    if (event.deltaY < 0) {
        console.log('向上滾動(dòng)');
        // 自定義邏輯（如切換上一張幻燈片）
    } else if (event.deltaY > 0) {
        console.log('向下滾動(dòng)');
        // 自定義邏輯（如切換下一張幻燈片）
    }
});

到此這篇關(guān)于JavaScript監(jiān)聽鼠標(biāo)滾輪(監(jiān)聽向上/向下滑動(dòng))事件的完整指南的文章就介紹到這了,更多相關(guān)JavaScript監(jiān)聽鼠標(biāo)滾輪事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: