鼠标滚轮事件绑定的兼容性问题
<html>
<head>
<meta charset="utf-8">
<title>JavaScript判断鼠标滚轮滚动方向- www.fengfly.com </title>
<script type="text/javascript">
function handle(delta) {
var s = delta+":";
if (delta <0){
s += "您在向下滚……";
}else{
s += "您在向上滚……";
}
document.getElementById('delta').innerHTML = s;
}
function wheel(event){
var delta = 0;
var event=event||window.event;
if (event.wheelDelta) {//ie||chrome||opera 滚轮每滚动一次,页面滑动的距离120px
delta = event.wheelDelta/120; // 1 -1
if (window.Safari){safari滚轮每滚动一次,页面滑动的距离360px
delta = event.wheelDelta/360; //1 -1
}
} else if (event.detail) {//火狐 滚轮每滚动一次,页面滑动的距离3px
delta = -event.detail/3;//1 -1
}
if (delta){
handle(delta);
}
}
if (window.addEventListener){
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
}
</script>
</head>
<body>
<div id="delta">滚动中轮试试~请选按着中轮滚动，激活后可以不按，直接滚动。 </div>
<p>shared by http://www.111cn.net</p>
<div>
•Firefox 鼠标滚轮向上滚动是-3，向下滚动是3<br/>
•IE 鼠标滚轮向上滚动是120，向下滚动是-120<br/>
•Safari 鼠标滚轮向上滚动是360，向下滚动是-360<br/>
•Opera 鼠标滚轮向上滚动是120，向下滚动是-120<br/>
•Chrome 鼠标滚轮向上滚动是120，向下滚动是-120
</div>
</body>
</html>
