js 滑鼠滾輪事件
阿新 • • 發佈:2019-01-08
總結一下滾動滑鼠滾輪,可以左右切換圖片。在網上找的資料,自己進行修改邏輯,完成。
<script>
var scrollFunc = function (e) {
var direct = 0;
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("滑輪向下滾動");
}
}
ScrollText(direct);
}
//給頁面繫結滑輪滾動事件
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滾動滑輪觸發scrollFunc方法
window.onmousewheel = document.onmousewheel = scrollFunc;
</script>
上面這段程式碼可以實現最基本的滑輪滾動事件,實現效果的同時滾動條也在滾動,下面程式碼要做的就是阻止實現效果的時候瀏覽器右側滾動條滾動
e = e || window.event ;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;//具體位置看下方程式碼
<script>
var scrollFunc = function (e) {
var direct = 0;
e = e || window.event;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
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("滑輪向下滾動");
}
}
ScrollText(direct);
}
//給頁面繫結滑輪滾動事件
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滾動滑輪觸發scrollFunc方法 獲取id是效果的作用域,指效果只在這一塊區域有效,超過此區域的不分是滾動條向下滾動
document.getElementById("op_computer_bg").onmousewheel = document.getElementById("op_computer_bg").onmousewheel = scrollFunc;
</script>