使用 Intersection Observer 觀察 HTML 元素的位置變化

TLDR: 使用 Intersection Observer 觀察元素的位置變化，無需監聽滾動事件或連續輪詢。

演示：

https://ajk-essential.github.io/Position-Observer/

Github 倉庫：

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偵測到位置變化時，這將作為回調被呼叫。參數：

• x ：代表目標的x座標
• y ：表示目標的 y 座標
• target：代表目標本身
• outOfViewport：表示目標是否已經超出視口的可視區域
• rootBounds：表示根元素或捕獲視窗的邊界。對於調試目的很有用。

到目前為止，positionObserver 已經設定完畢。現在要偵測元素的位置變化，我們需要像這樣觀察它：

positionObs.observe(target);

其中 target 代表我們想要觀察的實際元素。
要停止觀察位置變化，我們可以這樣使用它：

positionObs.disconnect()

您也可以造訪 https://github.com/AJK-Essential/Position-Observer/blob/main/docs/target-scroll.html 並查看腳本部分以查看範例實作

該觀察者的局限性：

1. 僅當目標在可視區域內移動時才能偵測到位置變化。
2. 當視口或目標的大小改變時，可能會失敗。因此，在這些情況下，最好斷開連接，然後再次觀察目標。

那麼這是完美的解決方案嗎？

我不知道。根據我的測試，它有效。可能有些情況下它可能不起作用......
我建議將其與監聽滾動結合使用（並將其用作連續輪詢的替代品），因為我觀察到有時它在演示中滾動時會錯過跟踪目標。

隨意使用並測試此 Github 儲存庫中的程式碼
(https://github.com/AJK-Essential/Position-Observer)，甚至可以私下修改它以適應您的專案/業務需求，或者如果您發現了錯誤並且也有解決方案。

希望這對您有幫助！

以上是使用 Intersection Observer 觀察 HTML 元素的位置變化的詳細內容。更多資訊請關注PHP中文網其他相關文章！