<!DOCTYPE html>
<html lang="zh-cn"> <head> <meta charset="UTF-8"> <style> *,body{ margin: 0; padding: 0; font-family: "微软雅黑"; text-align: center; } .wrap{ position:relative; z-index: 1; height: 2000px; } .wrap p{ padding-top: 320px; } #zmkt{ position: absolute; top:0; left: 50%; margin-left: -150px; width: 300px; height:300px; background-color:aliceblue; line-height: 300px; } </style> <script> </script> </head> <body> <div class="wrap"> <div id="zmkt">色块</div> <p id="Otext">鼠标滚动时，色块距离顶部200px<p> </div> <script type="text/javascript"> window.onmousewheel=function(){ document.getElementById('zmkt').style.top="200px"; } </script> </body> </html>