<style type="text/css">
#box1{
width:150px;
height:150px;
background-color:yellowGreen;
}
</style>
<script type="text/javascript">
window.onload=function(){
var box1=document.getElementById("box1");
box1.onmousewheel=function(event){
event=event||window.event;
if(event.wheelDelta>0||event.detail<0){
box1.style.height=box1.clientHeight-10+"px";
}
else{
box1.style.height=box1.clientHeight+10+"px";
}
event.preventDefault&&event.preventDefault();
return false;
}
bind(box1,"DOMMouseScroll",box1.onmousewheel)
}
function bind(obj,eventStr,callback){
if(obj.addEventListener){
obj.addEventListener(eventStr,callback,false);
}
else{
obj.attachEvent("on"+eventStr,function(){
callback.call(obj);
})
}
}
</script>
<body>
<div id="box1"></div>
</body>