onmousewheel
鼠標滾輪滾動的事件，會在滾輪滾動時觸發，但是火狐不支持該屬性。
在火狐中需要使用DOMMouseScroll來綁定滾動事件，注意該事件需要通過addEventListener()函數來綁定
wheelDelta
該屬性可以獲取鼠標滾動的方向，向上滾值為120，向下滾值為-120，wheelDelta這個值我們不看大小，只看正負。
比如：（event.wheelDelta）
wheelDelta這個屬性火狐中不支持，在火狐中使用detail屬性來獲取滾動的方向，向上滾-3，向下滾3。（event.detail）
當滾輪滾動時，如果瀏覽器有滾動條，滾動條會隨之滾動，這是瀏覽器的默認行為，如果不希望發生瀏覽器的默認行為，則可以取消默認行為，方法，在給元素綁定滾動時，最后return false;即可
使用addEventListener()方法綁定響應函數，取消默認行為時不能使用return false;
需要使用event來取消默認行為event.preventDefault()。
但是IE8不支持event.preventDefault();，如果直接調用會報錯。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<script>
window.onload=function(){
//當鼠標滾輪在box里向下滾動時，box變長，向上滾時變短。
//獲取div
var box=document.getElementById("box1");
//為box1綁定一個鼠標滾輪滾動的事件
box.onmousewheel=function(event){
event=event||window.event;
event.preventDefault()
if(event.wheelDelta>0||event.detail<0){
box.style.height=box.clientHeight+10+"px";
//box.style.width=box.clientWidth+10+"px";
}else{
box.style.height=box.clientHeight-10+"px";;
}
//當滾輪滾動時，如果瀏覽器有滾動條，滾動條會隨之滾動，這是瀏覽器的默認行為，
//如果不希望發生瀏覽器的默認行為，則可以取消默認行為，方法，在給元素綁定滾動時，最后return false;即可
return false;
};
//為火狐瀏覽器綁定鼠標滾輪事件，如果使用其它瀏覽器便不用寫此行代碼
bind(box,"DOMMouseScroll",box.onmousewheel);
}
var bind=function(obj,evenstr,callback){
if(obj.addEventListener){
//大部分瀏覽器兼容的方法
obj.addEventListener(evenstr,callback,false);
}else{
//IE8兼容的方法
obj.attachEvent("on"+evenstr,function(){
//改變attachEvent中的this指向，這里我們自定了了一個函數讓attachEvent去執行了，
//而attachEvent沒有去執行它本來該執行的函數。
callback.call(obj);
});
};
};
</script>
</head>
<body id="body" style="height: 2000px;">
<div id="box1"></div>
</body>
</html>