交差点オブザーバーがどのように監視するかの説明

この記事は、交差点オブザーバーAPIを掘り下げ、典型的な入門ガイドよりも深い理解を提供します。多くのリソースはそれを使用する方法に焦点を当てていますが、この探索は、その理由と方法を説明し、あらゆるレベルの開発者のギャップを埋めることを目的としています。

W3Cドラフトで定義されている交差点オブザーバーAPIは、ビューポートなどのコンテナ（ルート）に対するDOM要素（ターゲット）の可視性と位置を監視するメカニズムを提供します。この非同期アプローチは、プリロードと怠zyなロードコンテンツに最適な要素の可視性を効率的に処理します。これは、従来のスクロールイベントリスナーのパフォーマンスを向上させる代替手段ですが、必ずしも完全な代替品ではありません。どちらも相乗的に使用できます。

交差点オブザーバーのコアコンポーネント：

1. root ：観測された要素を含む親要素（またはビューポートのnull ）。
2. target ：観察されている子要素。
3. optionsオブジェクト：オブザーバーの動作を構成します（以下で説明します）。
4. callback関数：交差点の変更が発生するたびに実行されます。

基本例：

 const options = {
  root：document.body、
  rootmargin： '0px'、
  しきい値：0
};

関数コールバック（エントリ、オブザーバー）{
  console.log（オブザーバー）; //オブザーバーの詳細
  entries.foreach（entry => console.log（entry））; //各ターゲットの交差点の詳細
}

Observer = new IntersectionObserver（callback、options）;
Observer.observe（Targetelement）;

optionsオブジェクトの理解：

• root ：前述のように、含有要素。 nullデフォルトでビューポートになります。
• rootMargin ：ルートの境界ボックスを拡張または縮小するCSSマージンのような文字列（ '10px 20px' ）で、交差点検出に影響します。ピクセルとパーセンテージのみが許可されます。 rootがnullの場合は機能しません。
• threshold ：コールバックをトリガーするために必要なターゲット交差の割合を表す数値（0-1）または数字の配列。 0交差点で0トリガー。 1ターゲット全体がルート内にある場合にのみトリガーします。

callback関数とIntersectionObserverEntry ：

コールバックは、観測された各ターゲットに対して1つのIntersectionObserverEntryオブジェクトを受け取ります。重要なプロパティは次のとおりです。

• isIntersecting ：交差点を示すブール値。
• intersectionRatio ：ルートと交差するターゲットの割合（0-1）。
• boundingClientRect ：ビューポートに対するターゲットの境界長方形。
• intersectionRect ：交差点領域の長方形。
• rootBounds ：ビューポートに対するルートの境界長方形。
• target ：観測されたターゲット要素への参照。
• time ：交差点のタイムスタンプ。

交差点オブザーバー方法：

• observe(target) ：オブザーバーにターゲットを追加します。
• unobserve(target) ：ターゲットを削除します。
• disconnect() ：すべてのターゲットの観察を停止します。

パフォーマンスの比較：交差点オブザーバーとスクロールイベント：

ベンチマークは、特に多数の要素を処理する場合、交差点オブザーバーの優れたパフォーマンスを明らかにします。スクロールイベントでは、交差点検出のための手動計算が必要ですが、交差点オブザーバーはこのデータを直接提供するため、有意な効率向上が得られます。

intersectionRatio精度と位置の決定：

intersectionRatio交差点の割合を提供しますが、必ずしも完全に正確ではありません。それをboundingClientRect 、 intersectionRect 、およびrootBoundsと組み合わせることで、ルート内で正確な位置決定が可能になります。

「粘着性のある」ポジションイベントの作成：

rootMargin （ '0px 0px -100% 0px' ）を巧みに使用すると、「粘着性のある」位置イベントをシミュレートでき、要素がコンテナの上部に到達したときにコールバックをトリガーします。

スクロールイベントと組み合わせる：

精度を強化するには、交差点オブザーバーとスクロールイベントを組み合わせます。オブザーバーは、視認性に基づいてイベントリスナーの添付ファイル/削除を効率的に管理し、パフォーマンスを最適化できます。

ブラウザのサポートと癖：

交差点オブザーバーは、幅広いブラウザのサポートを楽しんでおり、ポリフィルは古いブラウザーで利用できます。ただし、さまざまなブラウザがtransformとclip-pathを含むアニメーションをどのように処理するかには、わずかな矛盾が存在します。

交差点オブザーバーV2（提案）：

将来のバージョンは、可視性の検出を改善し、不透明度を考慮し、重複する要素を改善するためのtrackVisibilityとdelayオプションを提案します。ただし、これはまだ開発中です。

結論として、交差点オブザーバーAPIは、要素の可視性と位置を効率的に管理するための強力なツールであり、従来のスクロールイベントの取り扱いよりもパフォーマンスの利点を提供します。そのニュアンスを理解することは、洗練されたパフォーマンスのあるWebアプリケーションを作成するための最大限の可能性を解き放ちます。

以上が交差点オブザーバーがどのように監視するかの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。