javascript監聽事件之監聽頁面滾動的示例

這篇文章主要為大家展示了javascript監聽事件之監聽頁面滾動的示例，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“javascript監聽事件之監聽頁面滾動的示例”這篇文章吧。

JavaScript的特點

1.JavaScript主要用來向HTML頁面添加交互行為。 2.JavaScript可以直接嵌入到HTML頁面，但寫成單獨的js文件有利于結構和行為的分離。 3.JavaScript具有跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行。

監聽事件

代碼

function pageChange () {
    // ... 頁面滾動時，需要做的事情
}
window.addEventListener("scroll" , pageChange, false);

知識點

1、使用 window.addEventListener 和 document.addEventListener 來處理頁面上的事件，區別僅僅在于：不同事件模型上，處理的順序不一樣。

捕獲，window 先于 document

冒泡，document 先于 window

2、參數
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false)

1) type: String  事件的類型

2) listener: Function 偵聽到事件后處理事件的函數

3) useCapture: Boolean(default = false)
這里牽扯到“事件流”的概念。
偵聽器在偵聽時有三個階段：捕獲階段、目標階段和冒泡階段。
順序 為：捕獲階段（根節點到子節點檢查是否調用了監聽函數）→

目標階段（目標本身）→
           冒泡階段（目標本身到根節點）。

此處的參數確定偵聽器是運行于捕獲階段、 目標階段還是冒泡階段。
如果將 useCapture 設置為 true，則偵聽器只在捕獲階段處理事件，而不在目標或冒泡階段處理事件。 如果useCapture 為 false，則偵聽器只在目標或冒泡階段處理事件。

要在所有三個階段都偵聽事件，請調用兩次 addEventListener，一次將 useCapture 設置為 true，第二次再將useCapture 設置為 false。

4) priority: int (default = 0)
事件偵聽器的優先級。
優先級由一個帶符號的 32 位整數指定。
數字越大，優先級越高。
優先級為 n 的所有偵聽器會在優先級為 n -1 的偵聽器之前得到處理。 如果兩個或更多個偵聽器共享相同的優先級，則按照它們的添加順序進行處理。
默認優先級為 0。

5) useWeakReference:Boolean (default = false) 　　
確定對偵聽器的引用是強引用，還是弱引用。
強引用（默認值）可防止您的偵聽器被當作垃圾回收。 弱引用則沒有此作用。

獲取頁面滾動高度

代碼

function getScrollTop() {
    return window.pageYOffset 
        || document.documentElement.scrollTop  
        || document.body.scrollTop  
        || 0;
}

瀏覽器兼容性

其中，pageYOffset 屬性返回文檔在窗口左上角垂直方向滾動的像素

讓頁面滾動至指定位置

代碼

/* 滾動動畫
   s: 當前頁面滾動高度
   sTop: 指定位置滾動高度
 */
function tabAnimation(s, sTop) {
    var type = s < sTop ? true : false; // true 頁面上滑

    var timmer = requestAnimationFrame(function fn() {
        if (type) { s+=50 } 
        else { s-=50 }
        if((type && s > sTop) || (!type && s < sTop)) {
            // $el.scrollTop = sTop;
            window.scrollTo(0, sTop); 
        } else {
            // $el.scrollTop = s;
            window.scrollTo(0, s); 
          timmer = requestAnimationFrame(fn);
        }
    });
}

說明

window.requestAnimationFrame() 方法告訴瀏覽器您希望執行動畫并請求瀏覽器在下一次重繪之前調用指定的函數來更新動畫。該方法使用一個回調函數作為參數，這個回調函數會在瀏覽器重繪之前調用。

當你需要更新屏幕畫面時就可以調用此方法。在瀏覽器下次重繪前執行回調函數。回調的次數通常是每秒60次，但大多數瀏覽器通常匹配 W3C 所建議的刷新頻率。

在大多數瀏覽器里，當運行在后臺標簽頁或者隱藏的<iframe> 里時，requestAnimationFrame() 會暫停調用以提升性能和電池壽命。

原生方法實現 addClass、removeClass 和 hasClass

function hasClass( elements, cName ) { 
  return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") )
}
function addClass( elements, cName ) { 
  if( !hasClass( elements,cName ) ) { 
    elements.className += " " + cName; 
  }
}
function removeClass( elements, cName ){ 
  if( hasClass( elements,cName ) ){ 
    elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );
  }
}

以上就是關于“javascript監聽事件之監聽頁面滾動的示例”的內容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學習新知識，若想了解更多相關知識內容，請多多關注億速云行業資訊頻道。