IntersectionObserver: observe() 方法
IntersectionObserver 介面的 observe() 方法用於將一個元素新增到 IntersectionObserver 正在監視的目標元素集合中。一個觀察者只有一個閾值集和一個根元素，但可以監視多個目標元素，以符合這些設定的方式來更改其可見性。
要停止觀察該元素，請呼叫 IntersectionObserver.unobserve()。
當指定元素的可見性跨越觀察者的某個可見性閾值（如 IntersectionObserver.thresholds 中列出的）時，將使用一個 IntersectionObserverEntry 物件陣列執行觀察者的回撥函式，該陣列代表發生的相交變化。請注意，這種設計允許透過一次回撥呼叫來處理多個元素的相交變化。
注意： 即使觀察到的元素尚未相對於視口移動，呼叫 observe() 後的第一個渲染週期，觀察者 回撥 也會始終觸發。這意味著，例如，當在視口外的元素上呼叫 observe() 時，回撥會立即被呼叫，其中至少有一個 entry 的 isIntersecting 屬性被設定為 false。而視口內的元素會導致回撥立即被呼叫，其中至少有一個 entry 的 isIntersecting 屬性被設定為 true。
語法
js
observe(targetElement)
引數
targetElement-
需要監視其在根元素內可見性的
element。該元素必須是根元素的後代（或者，如果根是文件的視口，則必須包含在當前文件中）。
返回值
無（undefined）。
示例
js
// Register IntersectionObserver
const io = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
// Add 'active' class if observation target is inside viewport
entry.target.classList.add("active");
} else {
// Remove 'active' class otherwise
entry.target.classList.remove("active");
}
});
});
// Declares what to observe, and observes its properties.
const boxElList = document.querySelectorAll(".box");
boxElList.forEach((el) => {
io.observe(el);
});
規範
| 規範 |
|---|
| 交集觀察器 # dom-intersectionobserver-observe |
瀏覽器相容性
載入中…