滚轮事件

  IE6首先实现了鼠标滚轮mousewheel事件,当用户通过滚动与页面交互、在垂直方向上滚动页面时,会触发mousewheel事件。最终会冒泡到document(IE8-)或window(标准)

  [注意]这个事件可以在任何元素上触发

  与mousewheel事件对应的event对象除包含鼠标事件的所有标准信息外,还包含一个特殊的wheelDelta属性。当用户向前滚动鼠标滚轮时,wheelDelta是120的倍数;当用户向后滚动鼠标滚轮时,wheelDelta是-120的倍数

document.body.onmousewheel = function(e){
    e = e || event;
    console.log(e.wheelDelta);
}

  firefox支持一个名为DOMMouseScroll的类似事件,有关鼠标滚轮的信息保存在detail属性中,当向前滚动鼠标滚轮时,detail是-3的倍数;向后滚动鼠标滚轮时,detail是3的倍数

document.body.addEventListener('DOMMouseScroll',function(e){
    e = e || event;
    console.log(e.detail);
},false);

  【跨浏览器兼容性处理方案】

var wheel = function(e){
    e = e || event;
    if(e.wheelDelta){
        return e.wheelDelta;
    }else{
        return -e.detail * 40;
    }
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);

  <例子>

<body style="height:2000px">
<p style="position: fixed">滚动滚轮将显示滚动值</p>
<div id="test" style="position: fixed"></div>
<script>
var wheel = function(e){
    e = e || event;
    if(e.wheelDelta){
        test.innerHTML = e.wheelDelta;
    }else{
        test.innerHTML = -e.detail * 40;
    }
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);    
</script>    
</body>

 

你可能感兴趣的:(滚轮事件)