IntersectionObserver

每次捲動都會執行一次監聽

宣告

let observer = new IntersectionObserver(callback, [option]);

callback

監聽到時要執行的動作函式

預設傳入參數為一陣列

code:javascript

[

{

// 唯讀變數，目標元素的矩形節點的資訊 (ID、座標、長寬)

boundingClientRect: {},

// 目標元素的出現比例

intersectionRation: 1,

// 唯讀變數，目標元素與觀察器的相交區域

intersectionRect: {},

// 是否出現於觀察器中

isIntersecting: true,

// 觀察器的資訊

rootBounds: {},

// 目標

target: 目標的 DOM 節點

}

];

option

有三個參數可調整

root

可指定特定 element 為觀察器

root: documnet.getElementById('container')

即目前觀看中的視窗

rootMargin

依序為上、右、下、左

可放大或縮小的觀察器的範圍

threshold

指定目標出現於觀察器內的百分比

到達該值後才執行 callback

可指定多個值

會在目標出現 0%、25%、50%、75%、100% 的時候都執行一次 callback 函式

即目標接觸到觀察器的邊緣便觸發 callback 函式

執行

observer.observe(el)

observer.unobserve(el)