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

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

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

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

1. 鼠標滾輪事件的基本概念

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

關鍵屬性

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

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

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

示例代碼

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

說明

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

3. 完整示例：阻止默認滾動 + 自定義邏輯

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠標滾輪事件示例</title>
    <style>
        body {
            height: 200vh; /* 模擬長頁面 */
            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) => {
            // 阻止默認滾動行為
            event.preventDefault();
            if (event.deltaY < 0) {
                // 向上滾動：上一張
                currentSlide = (currentSlide - 1 + slides.length) % slides.length;
            } else if (event.deltaY > 0) {
                // 向下滾動：下一張
                currentSlide = (currentSlide + 1) % slides.length;
            }
            updateSlider();
        });
        function updateSlider() {
            slides.forEach((slide, index) => {
                slide.style.transform = `translateY(${(index - currentSlide) * 100}%)`;
            });
        }
    </script>
</body>
</html>

代碼解析

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

4. 兼容性處理

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

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

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

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

5. 實際應用場景

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

6. 總結

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

完整代碼（推薦）

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

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

您可能感興趣的文章: