快捷導(dǎo)航

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

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

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

本文實(shí)例為大家分享了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)滾輪滾動(dòng)來(lái)改變高度 
        //滾輪向下滾，div變高 滾輪向上滾 div變短 
         
        //獲取box1 
        var box1 = document.getElementById("box1"); 
         
        /* 
         * onmousewheel 
         * - 鼠標(biāo)滾輪滾動(dòng)的事件，但是該事件火狐瀏覽器并不支持 
         * - 在火狐中需要使用DOMMouseScroll，這個(gè)事件只能通過(guò)addEventListener()來(lái)綁定 
         */ 
        //為box1綁定一個(gè)鼠標(biāo)滾輪滾動(dòng)的事件 
        box1.onmousewheel = function(event){ 
          event = event || window.event; 
           
          //判斷滾輪滾動(dòng)的方向 
          /* 
           * wheelDelta 
           * - 事件對(duì)象中的屬性，可以用來(lái)判斷鼠標(biāo)滾輪滾動(dòng)的方向 
           * - 向下滾 -120 向上滾 +120 
           * - 該屬性的值并不重要，重要的是值的符號(hào)，需要通過(guò)符號(hào)來(lái)判斷滾動(dòng)的方向 
           * - 但是該屬性火狐瀏覽器并不支持 
           */ 
          //alert(event.wheelDelta); 
           
          /* 
           * 火狐中通過(guò)detail來(lái)判斷方向 
           * - 向上滾 -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()綁定的事件，不能通過(guò)return false來(lái)取消默認(rèn)行為 
           * 需要調(diào)用事件對(duì)象 preventDefault()方法來(lái)取消默認(rèn)行為 
           * 但是在IE8中沒(méi)有該方法 
           */ 
          event.preventDefault &&　event.preventDefault(); 
           
          //當(dāng)頁(yè)面中有滾動(dòng)條時(shí)，由于滾輪滾動(dòng)的默認(rèn)行為會(huì)導(dǎo)致頁(yè)面整體下移 
          //取消默認(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>

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

您可能感興趣的文章: