溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

javascript滾輪事件的示例分析

發(fā)布時(shí)間：2021-08-07 10:53:10 來(lái)源：億速云 閱讀：160 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下javascript滾輪事件的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

具體內(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 > 
     
    <div id="box1"></div> 
     
     
  </body> 
</html>

看完了這篇文章，相信你對(duì)“javascript滾輪事件的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手