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 要素の位置の変化を観察できるかどうかを確認するためのアプローチ/実験です。

アプローチ:

Intersection Observer は、ターゲット要素が実際にルート要素と交差しているかどうかをレポートするのに非常に優れています。ターゲット要素が移動したときに発生する、ターゲット要素とルート要素間の交差部分の部分的な変化をレポートできます。

ルート境界のマージンを変更することで、キャプチャ ウィンドウ (ルート境界) の寸法を変更する機能もあります。

うーん…

アイデア:

そこで、キャプチャ ウィンドウを使用してターゲットをしっかりと包み込むというアイデアです。つまり、ターゲット要素が移動すると、キャプチャ ウィンドウに衝突して交差するため、Intersection Observer は高しきい値配列 (1/1000 の分割で 0 から 1) を使用して微細な交差を報告します。つまり、Intersection Observer は、ターゲットとルート (キャプチャ ウィンドウ) の間の交差エリアの変化を 1/1000 ごとにレポートします

キャプチャ ウィンドウの外に完全に移動した場合 (交差比率が 0 の場合にこれが発生します)、ルート (キャプチャ ウィンドウ) のマージンが新しいターゲット位置の周囲になるように再度変更されます。

私が直面した実装上の問題と、現在どのように解決されているか:

このアプローチは、ターゲットが視覚的なビューポートの寸法 (画面内) 内にあるものの、スクロール コンテキスト内に隠れているため視覚的には隠されているというスクロール状況に遭遇するまではうまく機能しました。

このシナリオでは、ターゲットが視覚領域内にある場合にのみ交差が報告されるため、交差比率は常に 0 でした。

したがって、これを解決するために私がとったアプローチは次のとおりです。

交差率が 0 であると報告された場合…
交差点オブザーバーが切断され、新しい設定で再接続されます:
 
キャプチャ ウィンドウの寸法は、画面全体になるように作成されます (つまり、ルート マージンが 0 になります)。

このシナリオのコールバックは、ルートバウンドが視覚的なビューポートであるときと、ターゲットのすぐ周囲にあるときを区別するために、別のメソッドで作成されます。

したがって、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 中国語 Web サイトの他の関連記事を参照してください。