交差点オブザーバーのいくつかの機能的な使用は、要素がいつ見えるかを知るためのいくつかの機能的な用途

交差点オブザーバーAPI：要素が見えるかどうかのリアルタイム監視

JavaScriptが近年多くのオブザーバーを静かに蓄積していることを知らないかもしれません。交差点オブザーバーは強力なツールの1つです。オブザーバーは、鳥が好きな場所に座って鳥が現れるのを待つのと同じように、特定のイベントをリアルタイムで監視するオブジェクトです。異なるオブザーバーは、さまざまな目標を観察します。

私が最初に接触したのは、DOMツリーの変化を検出するMutation Observerでした。当時はユニークでしたが、今ではもっと多くのオブザーバーがいます。

交差点オブザーバーは、要素とその祖先要素またはページの可視領域（つまり、ビューポート）の間の「交差」（つまり、要素がビューポートに入るか、離れる）を観察します。駅を通り過ぎる電車を見るのに少し似ています。列車が駅に入るとき、駅を出るとき、どのくらいの期間停止したかを見ることができます。

要素が視野に入ろうとしているとき、それが消えるとき、または視野に入ってからどれだけ通過したかを理解することは非常に実用的です。したがって、いくつかのユースケースについて学びます - コードの後、交差点オブザーバーAPIを介して交差するオーバーサーバーオブジェクトを作成します。

交差するオーバーサーバークイック概要

執筆時点で、交差点オブザーバーAPIは広範なサポートを受けています。

ブラウザは、Caniuseのデータをサポートしています。これには詳細が含まれています。番号は、ブラウザがこのバージョン以降でこの機能をサポートしていることを示しています。

デスクトップ

モバイル/タブレット

ただし、Intersection Observerを使用するときにサポートされているかどうかを確認する場合は、Window Objectに交差点Observerプロパティが存在するかどうかを確認できます。

 if（!! window.intersectionobserver）{}
/* または */
if（ 'IntersectionObserver' in Window）{}

OK、オブジェクトの作成を見てみましょう。

 var Observer = new IntersectionObserver（callback、options）;

交差点オブジェクトのコンストラクターは、2つのパラメーターを受け入れます。 1つ目はコールバック関数です。これは、オブザーバーが交差点に気付き、交差点に関するデータを非同期に渡すと実行されます。

2番目の（オプションの）パラメーターはオプションです。これは、「クロス」とは何かを定義する情報を含むオブジェクトです。要素がいつ視野に入ろうとしているのかを知りたくないかもしれませんが、それが完全に見えるときのみです。このようなことは、オプションパラメーターによって定義されます。

オプションには3つのプロパティがあります。

• ルート - 観測された要素が交差する祖先の要素/ビューポート。列車が渡る駅と考えてください。
• rootmargin - ルート要素の境界線、ルート要素の観測領域を縮小または拡大して、クロスオーバーを検出します。 CSSマージンプロパティに似ています。
• しきい値 - 値の配列（0〜1.0）は、それぞれが要素が渡る距離を表し、ルートを横切り、コールバックがトリガーされます。

しきい値が0.5であるとします。要素が半可視しきい値に入るか、それを超えると、コールバックがトリガーされます。値が[0.3, 0.6]の場合、要素が30％の可視しきい値と60％の可視しきい値に入るまたは超えると、コールバックがトリガーされます。

それは今の理論についてです。いくつかのデモを見てみましょう。まず第一に、怠zyなロード。

ユースケース1：レイジーロード画像

ロードタグを表示するには、埋め込まれたデモにタグが表示されないため、このページを確認します。

CSS-Tricksはすでに怠zyなロードを徹底的に導入しています。これは通常、このように行われます。軽量のプレースホルダーを表示すると、画像はプレースホルダーの位置に表示され、視野に入る（または入力しようとしている）予想画像に置き換えます。私を信じてください、これを実装することはまったく怠zyではありません。つまり、使用するネイティブコードを取得するまでです。

同じメカニズムを適用します。まず、たくさんの画像があり、最初に表示されるプレースホルダー画像を定義します。データ属性を使用して、表示される元の画像のURLを携帯しています。これは、実際の画像がビューのフィールドに入るときにロードされる画像を定義します。

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555311750.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="交差点オブザーバーのいくつかの機能的な使用は、要素がいつ見えるかを知るためのいくつかの機能的な用途"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555481250.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="交差点オブザーバーのいくつかの機能的な使用は、要素がいつ見えるかを知るためのいくつかの機能的な用途"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555431263.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="交差点オブザーバーのいくつかの機能的な使用は、要素がいつ見えるかを知るためのいくつかの機能的な用途">

残りはスクリプトです。

 Observer = new IntersectionObserver（
（エントリ、オブザーバー）=> { 
  entries.foreach（entry => {
    /*ここで各クロスを処理します*/
  }）;
}、 
{rootmargin： "0px 0px -200px 0px"}）;

上記のコールバック関数は矢印関数です（ただし、通常の関数を使用できます）。

コールバック関数は、各交差点に関する情報を含むエントリのセットの2つのパラメーターを受信します。そして、オブザーバー自体。これらのエントリは、フィルタリングまたはループされてから、必要なクロスエントリを処理できます。オプションに関しては、ルートマーギン値のみを提供し、ルートとしきい値のプロパティがデフォルト値を取得できるようにします。

ルートのデフォルト値はビューポートであり、しきい値のデフォルト値は0です。これは、「ビューポートに要素が表示される瞬間を通知してください！」

しかし、奇妙なことに、私はルートマーギンを使用して、ビューポートの観測領域の底部を200ピクセル減らしました。私たちは通常、怠zyなロードでこれを行いません。代わりに、マージンを増やすか、デフォルトを維持する場合があります。ただし、この場合、通常、マージンを減らしません。観測領域のしきい値にロードされた元の画像を実証したいという理由だけで、これを行います。それ以外の場合、すべての操作が視界から外れて発生します。

画像がビューポートのビューイング領域（デモンストレーションの下部の200ピクセル上）と交差すると、プレースホルダーの画像を実際の画像に置き換えます。

 Observer = new IntersectionObserver（
（エントリ、オブザーバー）=> { 
entries.foreach（entry => {
    /*プレースホルダー交換*/
    entry.target.src = entry.target.dataset.src;
    Observer.unobserve（entry.target）;
  }）;
}、 
{rootmargin： "0px 0px -200px 0px"}）;

entry.targetは、オブザーバーによって観察される要素です。私たちの場合、これらは画像要素です。プレースホルダーが画像要素に置き換えたら、それを観察する必要がなくなるため、オブザーバーのunobserveメソッドを呼び出します。

オブザーバーの準備ができたので、そのobserve方法を使用してすべての画像の観察を開始する時が来ました。

 document.queryselectorall（ 'img'）。

それでおしまい！画像をロードするのが面倒です。次のデモに移動します。

ユースケース2：要素が表示されるときにビデオを自動的に一時停止する

YouTubeでビデオを視聴し、（何らかの理由で）下にスクロールしてコメントを読みたいとします。私はあなたがどのようになっているのかわかりませんが、私は通常、これを行う前にビデオを一時停止することはありません。つまり、閲覧中にいくつかのビデオを見逃しています。

ビデオからスクロールしているときにビデオが自動的に一時停止する場合、それはいいことではないでしょうか？ビデオが視野に再び入ると再開されると、さらに良いことになるので、再生や一時停止をクリックする必要はありません。

交差点オブザーバーは確かにこれを行うことができます。

これがHTMLのビデオです：

<video controls="" src="OSRO-animation.mp4"></video>

各クロスオーバー中にビデオを一時停止して再生する方法は次のとおりです（つまり、エントリ）：

ビデオ= document.queryselector（ 'video'）;
ispaused = false; /*ビデオを自動的に一時停止するためのフラグ*/
let observer = new IntersectionObserver（（エントリ、オブザーバー）=> { 
  entries.foreach（entry => {
    if（entry.interectionRatio！= 1 &&！video.paused）{
      video.pause（）; ispaused = true;
    }
    else if（ispaused）{video.play（）; ispaused = false}
  }）;
}、{しきい値：1}）;
Observer.observe（ビデオ）;

各クロス中にビデオを一時停止して再生する方法を示す前に（つまり、エントリ）、オプションのしきい値プロパティに注意を向けたいと思います。

しきい値の値は1です。ルートとrootmarginはデフォルト値を取得します。これは、「ねえ、ビューポートで要素が完全に表示されたら教えてください」と言うことと同等です。

クロスが発生し、コールバックがトリガーされたら、次のロジックに従ってビデオを一時停止または再生します。

私はビデオのためにunobserve呼んでいないので、観察者はビデオを見るたびにビデオを見続け、一時停止します。

ユースケース3：表示されているコンテンツの量を表示

これは、コンテンツと、表示されているコンテンツの量を測定するための好みの方法に基づいて、さまざまな方法で説明および実装できます。

簡単な例については、ページ上の投稿のリストにある各投稿の最後の段落を観察します。記事の最後の段落が完全に見えるようになったら、この記事が読まれたと仮定します。電車の最後の車を見ることは列車全体を見るのと同等であると言うかもしれません。

これは、ページ上に2つの記事を示すデモで、それぞれにテキストの複数の段落が含まれています。

私たちの簡素化されたHTMLは次のように見えます：

<div></div>

<h2 id="第-条">第1条</h2>
<p></p>

<h2 id="第-条">第2条</h2>
<p></p>

n = 0とします。 /*表示された記事の総数*/
let count = document.querySelector（ '＃count'）;
let observer = new IntersectionObserver（（エントリ、オブザーバー）=> { 
  entries.foreach（entry => {
    if（entry.isinterSecting）{
      count.textContent = `記事完全に表示 -  $ {n}`; 
      Observer.unobserve（entry.target）;
    }
  }）;
}、{しきい値：1}）;

document.QuerySeLectorall（ 'article> p：last-child'）。

各クロスオーバー中に（つまり、記事の最後の段落が完全に表示されます）、カウンターを増やします：Nは、読み取られた記事の総数を表します。次に、その番号を記事リストの上に表示します。

最後の段落のクロスオーバーを計算したら、もうそれを観察する必要はないので、 unobserveを呼び出します。

ご参加いただきありがとうございます！

これは、一緒に表示するこの記事の例です。ビューポートとの交差点に基づいて、要素を観察し、イベントをトリガーする方法を使用する方法を学んだかもしれません。

つまり、オブザーバーを介して得られたクロスデータに基づいて視覚的な変更を加える場合、注意が必要です。もちろん、交差点オブザーバーは、クロスダタを記録するときに非常に便利です。ただし、画面上で変更を加えるために使用される場合、変更が遅れないようにする必要があります。これは、基本的に非同期に取得されたデータに基づいて変更を加えるためです。これにはロードに時間がかかる場合があります。

ご覧のとおり、各クロスエントリには、十字架に関する情報を伝える属性セットがあります。この投稿では、これらすべてのプロパティをカバーしていなかったので、必ずチェックしてください。

画像は元の形式で保存されています。テーブルは入力内の空であるため、出力には空のままであることに注意してください。また、元の意味を維持しながら、読みやすさと流れを改善するために文体的な変更を加えました。

以上が交差点オブザーバーのいくつかの機能的な使用は、要素がいつ見えるかを知るためのいくつかの機能的な用途の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。