视频链接：
视频
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚轮</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: #6495ED;
}
</style>
<script type="text/javascript">
window.onload=function(){
/**
* 鼠标滚轮滚动
* 向下滚box1变长
* 向上滚边短
*/
var box1=document.getElementById("box1");
//为box1绑定鼠标滚轮滚动事件
/**
* onmousewheel鼠标滚轮滚动的事件
* 在火狐中需要使用DOMMouseScroll来绑定滚动事件
* 注意该事件需要通过addEventListetner()来绑定
*/
box1.onmousewheel=function(event){
//判断鼠标滚轮滚动的方向
event=event||window.event;
//获取鼠标滚轮移动的方向event.wheelDelta 向上是正 向下是负
//火狐不支持event.wheelDelta,火狐：event.detail向上是负，向下是正
//alert(event.wheelDelta);
//alert(event.detail);
if(event.wheelDelta>0 ||event.detail<0){//兼容性
//alert("向上滚");
//向上滚box1变短
box1.style.height=box1.clientHeight-10+"px";
}else{
//alert("向下滚");
box1.style.height=box1.clientHeight+10+"px";
}
//如果浏览器有滚动条 这是浏览器的默认行为
event.preventDefault&&event.preventDefault();//火狐 取消默认行为 IE8没有这个 所以加个判断
return false;
};
//为火狐绑定滚轮事件的
//使用addEventListener方法绑定函数 取消默认行为时不能使用return false
//需要使用event来取消默认行为
bind(box1,"DOMMouseScroll",box1.onmousewheel);
}
function bind(obj,eventStr,callback){
if( obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);
}else{
//IE8及以下
//this 由调用方式决定的
obj.attachedEvent("on"+eventStr,function(){
callback.call(obj);
});
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
