轮事件：滚轮

滚动(卷动)事件：滚轮、拖拽滚动条、键盘方向键

<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事件：会在鼠标滚轮滚动的时候被触发, 对鼠标滚轮是否滚动进行判断, 但是火狐浏览器不支持这个属性。

DOMMouseScroll可以为火狐浏览器绑定滚动事件, 它需要通过addEventListener函数来绑定。

event.wheelDellta：可以用来获取鼠标的滚动方向, 对于得到的值, 只看正负, 往上滚是正值, 往下滚是负值。火狐浏览器不支持这个方法，需要会用event.detail来获取滚轮的滚动方向, 向上是负值，向下是正值。