<html>
<head>
<style>
*{margin:0px;padding:0px;}
#box{200px;height:500px;position:fixed;top:50px;left:200px;border:1px solid #000; overflow:hidden; }
#box2{position:absolute;left:0px;top:0px;200px;height:720px;border:1px solid #000;}
</style>
</head>
<body>
<div id="box">
<div id="box2">
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
2<br>
</div>
</div>
<script>
var box2=document.getElementById("box2");
var box=document.getElementById("box");
//非火狐
var scrollFn=function(e){
var e=e||window.event;
var down=true;
down=e.wheelDelta?e.wheelDelta<0:e.detail>0;
if(down){ //不管ff还是其他浏览器，确定方向向下
if(box2.offsetTop<0){
box2.style.top=box2.offsetTop+10+"px";
}else{ box2.style.top=0+"px";}
}else{ //方向向上
if(box.offsetTop-box2.offsetTop<220){
box2.style.top=box2.offsetTop-10+"px";
}else{
box2.style.top=-220+"px";
}
}
}
//为指定dom对象指定事件响应类型并绑定函数
function addEvent(obj,xEvent,fn) {
if(obj.attachEvent){
obj.attachEvent('on'+xEvent,fn);
}else{
obj.addEventListener(xEvent,fn,false);
}
}
addEvent(box,'mousewheel',scrollFn);
addEvent(box,'DOMMouseScroll',scrollFn); //兼容火狐语句
</script>
</body>
</html>