快捷導(dǎo)航

javascript滾輪事件基礎(chǔ)實例講解（37）

更新時間：2017年02月14日 17:18:49 作者：厚積薄發(fā)2017

這篇文章主要為大家詳細(xì)介紹了javascript滾輪事件基礎(chǔ)實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js滾輪事件的具體代碼，供大家參考，具體內(nèi)容如下

<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可以跟隨鼠標(biāo)滾輪滾動來改變高度 
        //滾輪向下滾，div變高 滾輪向上滾 div變短 
         
        //獲取box1 
        var box1 = document.getElementById("box1"); 
         
        /* 
         * onmousewheel 
         * - 鼠標(biāo)滾輪滾動的事件，但是該事件火狐瀏覽器并不支持 
         * - 在火狐中需要使用DOMMouseScroll，這個事件只能通過addEventListener()來綁定 
         */ 
        //為box1綁定一個鼠標(biāo)滾輪滾動的事件 
        box1.onmousewheel = function(event){ 
          event = event || window.event; 
           
          //判斷滾輪滾動的方向 
          /* 
           * wheelDelta 
           * - 事件對象中的屬性，可以用來判斷鼠標(biāo)滾輪滾動的方向 
           * - 向下滾 -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來取消默認(rèn)行為 
           * 需要調(diào)用事件對象 preventDefault()方法來取消默認(rèn)行為 
           * 但是在IE8中沒有該方法 
           */ 
          event.preventDefault &&　event.preventDefault(); 
           
          //當(dāng)頁面中有滾動條時，由于滾輪滾動的默認(rèn)行為會導(dǎo)致頁面整體下移 
          //取消默認(rèn)行為 
          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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: