添加鼠标滚动监听，控制div移动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4  <meta charset="UTF-8">
 5 </head>
 6 <body style="height: 5000px" id="wrapper">
 7     <div style="  300px; height: 100px; background:#000;" id="box1"></div>
 8     <div style="  300px; height: 100px; background:red;" id="box2"></div>
 9     <script>
10 
11           window.onload=function(){
12                 var oDiv1=document.getElementById("box1");
13                 var oDiv2=document.getElementById("box2");
14                 oDiv1.style.position="fixed";
15                 oDiv2.style.position="fixed";
16                 oDiv2.style.top="100px";
17                 //监听鼠标滚动后，调用的函数
18                 var scrollFunc=function(e){
19                        //console.log(e);
20                        e=e || window.event;
21                        //判断滚动方向
22                        var orient=e.deltaY;
23                        //鼠标滚动速度
24                        var speed=orient/100;
25                        //控制top；移动div1，2
26                        oDiv1.style.top = oDiv1.offsetTop+speed*4+'px';
27 
28                        oDiv2.style.top = oDiv2.offsetTop+speed*8+'px';
29 
30 
31                 }
32                 //注册监听事件
33                 if(document.addEventListener){
34                     document.addEventListener('DOMMouseScroll',scrollFunc,false);
35                 }
36                 window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
37 
38             }
39 
40 
41     </script>
42 </body>
43 </html>