鼠标滚轮滚动事件，兼容IE8和火狐、谷歌

最新推荐文章于 2021-12-03 09:44:56 发布

鑫运

最新推荐文章于 2021-12-03 09:44:56 发布

阅读量281

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/qq_35122887/article/details/119114063

版权

javaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           #box1{
               width: 100px;
               height: 100px;
               background-color: #007AFF;
           }
           body{
               height: 2000px;
           }
       </style>
       <script type="text/javascript">
           window.onload = function(){
               var box1 = document.getElementById("box1");
               box1.onmousewheel=function(event){
                   var event = event || window.event;//兼容ie
                   if(event.wheelDelta > 0 || event.detail < 0){//兼容火狐detail
                       console.log("向上滚动了！");
                       box1.style.height = box1.clientHeight > 10 ? box1.clientHeight - 10 + "px" : box1.clientHeight;
                   }else{
                       console.log("向下滚动了！");
                       box1.style.height = box1.clientHeight + 10 + "px";
                   };
                   event.preventDefault && event.preventDefault();//兼容火狐
                   return false;
               };
               bind(box1,"DOMMouseScroll",box1.onmousewheel);//兼容火狐DOMMouseScroll
               //封装监听事件函数
               function bind(obj,methds,callback){
                   if(obj.addEventListener){
                       obj.addEventListener(methds,callback,false);
                   }else{
                       obj.attachEvent("on" + methds, function(){
                           callback.call(obj);
                       })
                   }
               };
           };
       </script>
   </head>
   <body>
       <div id="box1"></div>
   </body>
</html>

鑫运

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标滚轮滚动事件，兼容IE8和火狐、谷歌

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; ...
复制链接

扫一扫

专栏目录