HTML編程之滾輪滑動監聽效果的實現

在前端頁面製作過程中，我們經常會發現有時候某些動作需要滾動滑輪來實現，那麼對於初學者來說可能不明白是如何實現的，對於這個問題，下面就來跟大家分析一下，如何用滾輪滑動監聽效果的實現。

源代碼如下：

windowAddMouseWheel();
function windowAddMouseWheel() {
    var scrollFunc = function (e) {
        e = e || window.event;
        if (e.wheelDelta) {  //判斷瀏覽器IE，谷歌滑輪事件
            if (e.wheelDelta > 0) { //當滑輪向上滾動時
                alert("滑輪向上滾動");
            }
            if (e.wheelDelta < 0) { //當滑輪向下滾動時
                alert("滑輪向下滾動");
            }
        } else if (e.detail) {  //Firefox滑輪事件
            if (e.detail> 0) { //當滑輪向上滾動時
                alert("滑輪向上滾動");
            }
            if (e.detail< 0) { //當滑輪向下滾動時
                alert("滑輪向下滾動");
            }
        }
    };
    //給頁面綁定滑輪滾動事件
    if (document.addEventListener) {
        document.addEventListener('DOMMouseScroll', scrollFunc, false);
    }
//滾動滑輪觸發scrollFunc方法
    window.onmousewheel = document.onmousewheel = scrollFunc;
}

現在大家知道是如何控制實現的吧，如果還是有不明白的地方，或者不知道哪裏出錯了，都是可以留言諮詢我們來尋求幫助和解答的。

本文由專業的鄭州app開發公司燚軒科技整理髮布，原創不易，如需轉載請註明出處。