一个兼容火狐、谷歌、IE等主流浏览器的滚动事件demo-CSDN博客

本文链接：https://blog.csdn.net/hzxonlineok/article/details/85785023

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
           <label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>
           <label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/>
           <p style="height: 2000px;">随便写点什么内容。。。</p>
           <script type="text/javascript">
           var scrollFunc=function(e){
               e=e || window.event;
               var t1=document.getElementById("wheelDelta");
               var t2=document.getElementById("detail");

               if(e.wheelDelta){//IE/Opera/Chrome
                   t1.value=e.wheelDelta;
               }else if(e.detail){//Firefox
                   t2.value=e.detail;
               }
               console.log(ScollPostion())
           }
function ScollPostion() {
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
} else if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
return {
top: t,
left: l,
width: w,
height: h
};
}
           /*注册事件*/
           if(document.addEventListener){
               document.addEventListener('DOMMouseScroll',scrollFunc,false);
           }//W3C
           window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

           </script>
   </body>
</html>