js--5.事件-8.滚轮事件

最新推荐文章于 2023-04-11 18:11:00 发布

qq_26553781

最新推荐文章于 2023-04-11 18:11:00 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/qq_26553781/article/details/79261109

版权

1 滑轮事件

1.1 概述

2 Demo

<style type="text/css">
          
           #box1{
              width:100px;
              height:100px;
              background-color: red;
           }
          
       </style>
       <script type="text/javascript">
          
           window.onload = function(){
             
             
              //获取id为box1的div
              var box1 = document.getElementById("box1");
             
              //为box1绑定一个鼠标滚轮滚动的事件
              /*
               * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
               * 但是火狐不支持该属性
               *
               * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
               * 注意该事件需要通过addEventListener()函数来绑定
               */
             
             
              box1.onmousewheel = function(event){
                 
                  event = event || window.event;
                 
                 
                  //event.wheelDelta 可以获取鼠标滚轮滚动的方向
                  //向上滚 120   向下滚 -120
                  //wheelDelta这个值我们不看大小，只看正负
                 
                  //alert(event.wheelDelta);
                 
                  //wheelDelta这个属性火狐中不支持
                  //在火狐中使用event.detail来获取滚动的方向
                  //向上滚 -3  向下滚 3
                  //alert(event.detail);
                 
                 
                  /*
                   * 当鼠标滚轮向下滚动时，box1变长
                   * 当滚轮向上滚动时，box1变短
                   */
                  //判断鼠标滚轮滚动的方向
                  if(event.wheelDelta > 0 || event.detail < 0){
                     //向上滚，box1变短
                     box1.style.height = box1.clientHeight - 10 + "px";
                    
                  }else{
                     //向下滚，box1变长
                     box1.style.height = box1.clientHeight + 10 + "px";
                  }
                 
                  /*
                   * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
                   * 需要使用event来取消默认行为event.preventDefault();
                   * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错
                   */
                  event.preventDefault && event.preventDefault();
                 
                 
                  /*
                   * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
                   * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
                   */
                  return false;
                 
                 
                 
                 
              };
             
              //为火狐绑定滚轮事件
              bind(box1,"DOMMouseScroll",box1.onmousewheel);
             
             
           };
          
          
           function bind(obj , eventStr , callback){
              if(obj.addEventListener){
                  //大部分浏览器兼容的方式
                  obj.addEventListener(eventStr , callback , false);
              }else{
                  /*
                   * this是谁由调用方式决定
                   * callback.call(obj)
                   */
                  //IE8及以下
                  obj.attachEvent("on"+eventStr , function(){
                     //在匿名函数中调用回调函数
                     callback.call(obj);
                  });
              }
           }
          
       </script>
    </head>
    <body style="height:2000px;">
      
       <div id="box1"></div>
      
    </body>
</html>