1. 程式人生 > >HTML編程之滾輪滑動監聽效果的實現

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

false eve function dom 滾輪 event als 瀏覽器 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開發公司燚軒科技整理發布,原創不易,如需轉載請註明出處。

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