這篇文章主要為大家展示了javascript監(jiān)聽(tīng)事件之監(jiān)聽(tīng)頁(yè)面滾動(dòng)的示例，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來(lái)研究并學(xué)習(xí)一下“javascript監(jiān)聽(tīng)事件之監(jiān)聽(tīng)頁(yè)面滾動(dòng)的示例”這篇文章吧。

創(chuàng)新互聯(lián)主營(yíng)曲江網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,APP應(yīng)用開(kāi)發(fā),曲江h(huán)5成都微信小程序搭建,曲江網(wǎng)站營(yíng)銷(xiāo)推廣歡迎曲江等地區(qū)企業(yè)咨詢(xún)

JavaScript的特點(diǎn)

1.JavaScript主要用來(lái)向HTML頁(yè)面添加交互行為。 2.JavaScript可以直接嵌入到HTML頁(yè)面，但寫(xiě)成單獨(dú)的js文件有利于結(jié)構(gòu)和行為的分離。 3.JavaScript具有跨平臺(tái)特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺(tái)下運(yùn)行。

監(jiān)聽(tīng)事件

代碼

function pageChange () {
    // ... 頁(yè)面滾動(dòng)時(shí)，需要做的事情
}
window.addEventListener("scroll" , pageChange, false);

知識(shí)點(diǎn)

1、使用 window.addEventListener 和 document.addEventListener 來(lái)處理頁(yè)面上的事件，區(qū)別僅僅在于：不同事件模型上，處理的順序不一樣。

捕獲，window 先于 document

冒泡，document 先于 window

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

1) type: String  事件的類(lèi)型

2) listener: Function 偵聽(tīng)到事件后處理事件的函數(shù)

3) useCapture: Boolean(default = false)
這里牽扯到“事件流”的概念。
偵聽(tīng)器在偵聽(tīng)時(shí)有三個(gè)階段：捕獲階段、目標(biāo)階段和冒泡階段。
順序 為：捕獲階段（根節(jié)點(diǎn)到子節(jié)點(diǎn)檢查是否調(diào)用了監(jiān)聽(tīng)函數(shù)）→

目標(biāo)階段（目標(biāo)本身）→
           冒泡階段（目標(biāo)本身到根節(jié)點(diǎn)）。

此處的參數(shù)確定偵聽(tīng)器是運(yùn)行于捕獲階段、 目標(biāo)階段還是冒泡階段。
如果將 useCapture 設(shè)置為 true，則偵聽(tīng)器只在捕獲階段處理事件，而不在目標(biāo)或冒泡階段處理事件。 如果useCapture 為 false，則偵聽(tīng)器只在目標(biāo)或冒泡階段處理事件。

要在所有三個(gè)階段都偵聽(tīng)事件，請(qǐng)調(diào)用兩次 addEventListener，一次將 useCapture 設(shè)置為 true，第二次再將useCapture 設(shè)置為 false。

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

5) useWeakReference:Boolean (default = false) 　　
確定對(duì)偵聽(tīng)器的引用是強(qiáng)引用，還是弱引用。
強(qiáng)引用（默認(rèn)值）可防止您的偵聽(tīng)器被當(dāng)作垃圾回收。 弱引用則沒(méi)有此作用。

獲取頁(yè)面滾動(dòng)高度

代碼

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

瀏覽器兼容性

	谷歌	火狐	IE	360	Microsoft Edge
window.pageYOffset	Yes	Yes	Yes	Yes	Yes
document.documentElement.scrollTop	Yes	Yes	Yes	Yes	No
document.body.scrollTop	No	No	No	No	Yes

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

讓頁(yè)面滾動(dòng)至指定位置

代碼

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

    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);
        }
    });
}

說(shuō)明

window.requestAnimationFrame() 方法告訴瀏覽器您希望執(zhí)行動(dòng)畫(huà)并請(qǐng)求瀏覽器在下一次重繪之前調(diào)用指定的函數(shù)來(lái)更新動(dòng)畫(huà)。該方法使用一個(gè)回調(diào)函數(shù)作為參數(shù)，這個(gè)回調(diào)函數(shù)會(huì)在瀏覽器重繪之前調(diào)用。

當(dāng)你需要更新屏幕畫(huà)面時(shí)就可以調(diào)用此方法。在瀏覽器下次重繪前執(zhí)行回調(diào)函數(shù)?；卣{(diào)的次數(shù)通常是每秒60次，但大多數(shù)瀏覽器通常匹配 W3C 所建議的刷新頻率。

在大多數(shù)瀏覽器里，當(dāng)運(yùn)行在后臺(tái)標(biāo)簽頁(yè)或者隱藏的<iframe> 里時(shí)，requestAnimationFrame() 會(huì)暫停調(diào)用以提升性能和電池壽命。

原生方法實(shí)現(xiàn) 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|$)" ), " " );
  }
}

以上就是關(guān)于“javascript監(jiān)聽(tīng)事件之監(jiān)聽(tīng)頁(yè)面滾動(dòng)的示例”的內(nèi)容，如果改文章對(duì)你有所幫助并覺(jué)得寫(xiě)得不錯(cuò)，勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請(qǐng)多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站標(biāo)題：javascript監(jiān)聽(tīng)事件之監(jiān)聽(tīng)頁(yè)面滾動(dòng)的示例
本文來(lái)源：http://chinadenli.net/article48/ihjihp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站收錄、面包屑導(dǎo)航、網(wǎng)站改版、網(wǎng)頁(yè)設(shè)計(jì)公司、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)