輪事件：滾輪

滾動(卷動)事件：滾輪、拖拽滾動條、鍵盤方向鍵

<script type="text/javascript">
//滾輪事件：滾輪
//卷動事件：滾輪、拖拽滾動條、鍵盤?鍵

//IE和Chrome
gunlun.onmousewheel = function(){
this.innerHTML += "IE和Chrome<br/>";
}
//Firefox
gunlun.addEventListener("DOMMouseScroll", function(){
this.innerHTML += "Firefox<br/>";
})
</script>

判斷滾輪方向

<script type="text/javascript">
//滾輪事件：滾輪
//卷動事件：滾輪、拖拽滾動條、鍵盤?鍵

//IE和Chrome
gunlun.onmousewheel = function(e){
var ev = e || window.event;
console.log(ev.wheelDelta);//判斷滾輪方向的
//上120
//下-120

this.innerHTML += "IE和Chrome<br/>";
}
//Firefox
gunlun.addEventListener("DOMMouseScroll",function(e){
var ev = e || window.event;
console.log(ev.detail);//滾輪方向
//上-3
//下3
this.innerHTML += "Firefox<br/>";
})
</script>

兼容性封裝

<script type="text/javascript">
//滾輪事件：滾輪
//卷動事件：滾輪、拖拽滾動條、鍵盤?鍵

//IE和Chrome
Roller.onmousewheel = gl;
//Firefox
Roller.addEventListener("DOMMouseScroll",gl)

function gl(e){
var dir;
//事件對象的兼容
var ev = e || window.event;
if(ev.wheelDelta){
//IE和Chrome
dir = ev.wheelDelta>0?"上":"下";
}else if(ev.detail){
//FireFox
dir = ev.detail>0?"下":"上";
}

console.log(dir)

}
</script>

nmousewheel事件：會在鼠標(biāo)滾輪滾動的時候被觸發(fā), 對鼠標(biāo)滾輪是否滾動進(jìn)行判斷, 但是火狐瀏覽器不支持這個屬性。

DOMMouseScroll可以為火狐瀏覽器綁定滾動事件, 它需要通過addEventListener函數(shù)來綁定。

event.wheelDellta：可以用來獲取鼠標(biāo)的滾動方向, 對于得到的值, 只看正負(fù), 往上滾是正值, 往下滾是負(fù)值。火狐瀏覽器不支持這個方法，需要會用event.detail來獲取滾輪的滾動方向, 向上是負(fù)值，向下是正值。