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>