当前位置： 移动技术网 > IT编程>开发语言>JavaScript > javascript滚轮事件基础实例讲解（37）

javascript滚轮事件基础实例讲解（37）

2019年03月25日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了js滚轮事件的具体代码，供大家参考，具体内容如下

<html> 
  <head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css"> 
      #box1{ 
        width: 100px; 
        height: 100px; 
        background-color: red; 
      } 
       
    </style> 
     
    <script type="text/javascript"> 
       
      window.onload = function(){ 
         
        //使div可以跟随鼠标滚轮滚动来改变高度 
        //滚轮向下滚，div变高 滚轮向上滚 div变短 
         
        //获取box1 
        var box1 = document.getelementbyid("box1"); 
         
        /* 
         * onmousewheel 
         * - 鼠标滚轮滚动的事件，但是该事件火狐浏览器并不支持 
         * - 在火狐中需要使用dommousescroll，这个事件只能通过addeventlistener()来绑定 
         */ 
        //为box1绑定一个鼠标滚轮滚动的事件 
        box1.onmousewheel = function(event){ 
          event = event || window.event; 
           
          //判断滚轮滚动的方向 
          /* 
           * wheeldelta 
           * - 事件对象中的属性，可以用来判断鼠标滚轮滚动的方向 
           * - 向下滚 -120 向上滚 +120 
           * - 该属性的值并不重要，重要的是值的符号，需要通过符号来判断滚动的方向 
           * - 但是该属性火狐浏览器并不支持 
           */ 
          //alert(event.wheeldelta); 
           
          /* 
           * 火狐中通过detail来判断方向 
           * - 向上滚 -3  向下滚 +3 
           */ 
          //alert(event.detail); 
           
          if(event.wheeldelta < 0 || event.detail > 0){ 
            //向下滚 
            //增加box1的高度 
            box1.style.height = box1.offsetheight + 10 + "px"; 
             
          }else{ 
            //向上滚 
            //减小box1的高度 
            box1.style.height = box1.offsetheight - 10 + "px"; 
          } 
           
           
          /* 
           * 使用addeventlistener()绑定的事件，不能通过return false来取消默认行为 
           * 需要调用事件对象 preventdefault()方法来取消默认行为 
           * 但是在ie8中没有该方法 
           */ 
          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{ 
          //ie8 
          obj.attachevent("on"+eventstr , function(){ 
            callback.call(obj); 
          }); 
        } 
      } 
       
    </script> 
  </head> 
  <body style="height: 3000px;"> 
     
    <div id="box1"></div> 
     
     
  </body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网