IntersectionObserver
Baseline 廣泛可用 *
IntersectionObserver 介面是 Intersection Observer API 的一部分，它提供了一種非同步觀察目標元素與祖先元素或頂級文件的 視口 交叉區域變化的方法。祖先元素或視口被稱為“根”。
建立 IntersectionObserver 時，它會被配置為監視根元素內可見比例的給定閾值。一旦建立，該配置就無法更改。因此，同一個 observer 物件只能用於監視特定可見度變化閾值；不過，您可以使用同一個 observer 監視多個目標元素。
建構函式
IntersectionObserver()-
建立一個新的
IntersectionObserver物件，當它檢測到目標元素的可見度已越過一個或多個閾值時，將執行指定的回撥函式。
例項屬性
IntersectionObserver.delay只讀 實驗性-
一個整數，表示此 observer 傳送通知之間的最小延遲時間。
IntersectionObserver.root只讀-
在測試交叉區域時用作邊界框的
Element或Document。如果建構函式未傳遞root值或其值為null，則使用頂級文件的視口。 IntersectionObserver.rootMargin只讀-
一個偏移矩形，在計算交叉區域時應用於根的 邊界框，從而有效地縮小或擴大根以用於計算。此屬性返回值可能與呼叫建構函式時指定的值不同，因為它可能會被修改以滿足內部需求。每個偏移量都可以用畫素 (
px) 或百分比 (%) 表示。預設值為 "0px 0px 0px 0px"。 IntersectionObserver.scrollMargin只讀-
一個偏移矩形，應用於從交叉區域根到目標的路徑上的每個 滾動容器，從而有效地縮小或擴大用於計算交叉區域的裁剪矩形。此屬性返回值可能與呼叫建構函式時指定的值不同。
IntersectionObserver.thresholds只讀-
一個按數值升序排列的閾值列表，其中每個閾值都是已觀察目標交叉區域面積與其邊界框面積的比率。當目標的任何閾值被越過時，就會為其生成通知。如果建構函式未傳遞任何值，則使用 0。
IntersectionObserver.trackVisibility只讀 實驗性-
一個布林值，指示此
IntersectionObserver是否正在檢查目標是否具有受損的可見性。
例項方法
IntersectionObserver.disconnect()-
停止
IntersectionObserver物件監視任何目標。 IntersectionObserver.observe()-
告訴
IntersectionObserver要監視的目標元素。 IntersectionObserver.takeRecords()-
返回一個
IntersectionObserverEntry物件陣列，其中包含所有已觀察目標的資訊。 IntersectionObserver.unobserve()-
告訴
IntersectionObserver停止監視特定的目標元素。
示例
const intersectionObserver = new IntersectionObserver((entries) => {
// If intersectionRatio is 0, the target is out of view
// and we do not need to do anything.
if (entries[0].intersectionRatio <= 0) return;
loadItems(10);
console.log("Loaded new items");
});
// start observing
intersectionObserver.observe(document.querySelector(".scrollerFooter"));
規範
| 規範 |
|---|
| 交集觀察器 # intersection-observer-interface |
瀏覽器相容性
載入中…