TLDR: 使用 Intersection Observer 觀察元素的位置變化，無需監聽滾動事件或連續輪詢。
https://ajk-essential.github.io/Position-Observer/
https://github.com/AJK-Essential/Position-Observer
傳統上，要觀察元素何時在視口內移動，我們必須依靠監聽 HTML 元素的父元素的滾動事件或使用連續輪詢方法，例如使用 requestanimationframe。
這樣有效......但還可以更好...
因為監聽滾動事件可能會導致效能延遲。
並且連續輪詢始終在後台運行…即使目標元素沒有移動，這也可能會增加 CPU 的負載。
所以，這是一種方法/實驗，看看我們是否可以使用 Intersection Observer 來觀察 html 元素的位置變化。
交叉觀察器非常擅長報告目標元素是否確實與根元素相交。它們可以報告目標元素和根元素之間相交的分數變化，這種變化在目標元素移動時發生。
我們也可以透過修改 rootBounds 的邊距來更改捕獲視窗（rootbounds）的尺寸。
嗯…
所以我們的想法是使用捕獲窗口緊緊包裹目標。這意味著當目標元素移動時，它會撞擊捕獲視窗並與之相交，因此 Intersection Observer 使用高閾值數組（從 0 到 1，以 1/1000 為單位）報告分鐘交叉點。這意味著交集觀察器報告目標和根（捕獲視窗）之間交集區域每 1/1000 的變化
如果它完全移出捕獲視窗（當相交比為 0 時會發生這種情況），那麼我們再次將根（捕獲視窗）的邊距更改為新的目標位置周圍。
這種方法效果很好，直到我遇到滾動情況，其中目標位於視覺視口尺寸內（螢幕內），但在視覺上隱藏，因為它隱藏在滾動上下文中。
在這種情況下，交叉點比率始終為 0，因為只有當目標位於可視區域內時才會報告交叉點。
為了解決這個問題，我採取的方法是這樣的。
當報告相交比為 0 時...
交叉點觀察器斷開連接，然後使用新設定重新連接：
捕獲視窗尺寸設為整個螢幕（即 root-margins 為 0）。
這個場景的回調是用另一種方法進行的，以便區分 rootbounds 是視覺視窗的時刻和它正好在目標周圍的時刻。
因此，當 Intersection Observer 現在報告任何小於 1 的交叉比時，我們不會執行任何操作。對於每一份報告，我們都會說立場改變了。
當比率變成1時，表示目標完全在視覺區域內。在此期間，我們再次斷開 Intersection Observer 的連接，並使用先前的回調方法再次與目標周圍的更精細的視窗重新連接。
因此捕獲視窗（rootBounds）最終在更精細的視窗和視覺視窗之間循環。
是的。我在我的 Github 儲存庫 (https://github.com/AJK-Essential/Position-Observer) 中實現了與 PositionObserver 類別相同的功能。這些文件位於 dist 資料夾內。這些文件可以下載。
然後
PositionObserver 類別可以像這樣導入：
import { PositionObserver } from "./position-observer.js";
然後建立此 PositionObserver 的實例，如下所示：
const positionObs = new PositionObserver(posObsCallback);
其中 posObsCallback 是接受以下類型的物件參數的任何函數：
{
x: number;
y: number;
target: HTMLElement | Element;
outOfViewport: boolean;
rootBounds: DOMRect | null;
};
當positionObserver偵測到位置變化時，這將作為回調被呼叫。參數：
到目前為止，positionObserver 已經設定完畢。現在要偵測元素的位置變化，我們需要像這樣觀察它：
positionObs.observe(target);
其中 target 代表我們想要觀察的實際元素。
要停止觀察位置變化，我們可以這樣使用它：
positionObs.disconnect()
您也可以造訪 https://github.com/AJK-Essential/Position-Observer/blob/main/docs/target-scroll.html 並查看腳本部分以查看範例實作
我不知道。根據我的測試，它有效。可能有些情況下它可能不起作用......
我建議將其與監聽滾動結合使用（並將其用作連續輪詢的替代品），因為我觀察到有時它在演示中滾動時會錯過跟踪目標。
隨意使用並測試此 Github 儲存庫中的程式碼
(https://github.com/AJK-Essential/Position-Observer)，甚至可以私下修改它以適應您的專案/業務需求，或者如果您發現了錯誤並且也有解決方案。
希望這對您有幫助！
以上是使用 Intersection Observer 觀察 HTML 元素的位置變化的詳細內容。更多資訊請關注PHP中文網其他相關文章！
