>[danger]介紹一下Js中的IntersectionObserver `IntersectionObserver` 是一個構造函數，可以接收兩個參數，第一個參數是一個回調函數，第二個參數是一個對象。這個方法用于觀察元素相交情況，它可以異步地監聽一個或多個目標元素與其祖先元素或視口之間的交叉狀態。它提供了一種有效的方法來檢測元素是否可見或進入視口。 >[info]用法 使用 `IntersectionObserver` 需要以下步驟： 1. 創建一個 `IntersectionObserver` 實例，傳入一個回調函數和可選的配置對象。 ``` const observer = new IntersectionObserver(callback, options); const callback = (entries, observer) => { // 處理交叉狀態變化的回調函數 }; const options = { // 可選配置 }; ``` 2. 將要觀察的目標元素添加到觀察者中。 ~~~ const target = document.querySelector('#targetElement'); observer.observe(target); ~~~ 3. 在回調函數中處理交叉狀態的變化。 ~~~ const callback = (entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { // 元素進入視口 } else { // 元素離開視口 } }); }; ~~~ `entries` 參數是一個包含每個目標元素交叉狀態信息的數組。每個 `entry` 對象都有以下屬性： * `target`：觀察的目標元素。 * `intersectionRatio`：目標元素與視口的交叉比例，值在 0 到 1 之間。 * `isIntersecting`：目標元素是否與視口相交。 * `intersectionRect`：目標元素與視口的交叉區域的位置和尺寸信息。 `options` 對象是可選的配置，其中常用的配置選項包括： * `root`：指定觀察器的根元素，默認為視口。 * `rootMargin`：設置根元素的外邊距，用于擴大或縮小交叉區域。 * `threshold`：指定交叉比例的閾值，可以是單個數值或由多個數值組成的數組。 >[info]應用場景 `IntersectionObserver` 適用于實現懶加載、無限滾動、廣告展示和可視化統計等場景，同樣可以判斷元素是否在某一個容器內，不會引起回流。