資訊專(zhuān)欄INFORMATION COLUMN
摘要：監(jiān)聽(tīng)事件代碼頁(yè)面滾動(dòng)時(shí)，需要做的事情知識(shí)點(diǎn)使用和來(lái)處理頁(yè)面上的事件，區(qū)別僅僅在于不同事件模型上，處理的順序不一樣。此處的參數(shù)確定偵聽(tīng)器是運(yùn)行于捕獲階段目標(biāo)階段還是冒泡階段。如果為，則偵聽(tīng)器只在目標(biāo)或冒泡階段處理事件。事件偵聽(tīng)器的優(yōu)先級(jí)。
監(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)有此作用。
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è)或者隱藏的