<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#d01{
200px;
height: 150px;
background-color: green;
}
</style>
<body style="height: 2000px;">
<div id="d01">
</div>
</body>
<script type="text/javascript">
//当鼠标滚轮向下滚d01变长，向上滚变短
var d01=document.getElementById("d01");
//绑定一个鼠标滚轮滚动事件
d01.onmousewheel=function(event){
// alert("111");
//event.wheelDelat 可以获取滚轮滚动方向 上滚为正值
if(event.wheelDelta>0){
// alert("向上滚");
d01.style.height=d01.clientHeight-10+"px";
}else{
// alert("向下滚");
d01.style.height=d01.clientHeight+10+"px";
}
//取消浏览器默认滚动条，不然会跟着事件以前滚动
return false;
}
</script>
</html>