交差點(diǎn)オブザーバーAPI：要素が見(jiàn)えるかどうかのリアルタイム監(jiān)視

JavaScriptが近年多くのオブザーバーを靜かに蓄積していることを知らないかもしれません。交差點(diǎn)オブザーバーは強(qiáng)力なツールの1つです。オブザーバーは、鳥(niǎo)が好きな場(chǎng)所に座って鳥(niǎo)が現(xiàn)れるのを待つのと同じように、特定のイベントをリアルタイムで監(jiān)視するオブジェクトです。異なるオブザーバーは、さまざまな目標(biāo)を観察します。

私が最初に接觸したのは、DOMツリーの変化を検出するMutation Observerでした。當(dāng)時(shí)はユニークでしたが、今ではもっと多くのオブザーバーがいます。

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

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

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

執(zhí)筆時(shí)點(diǎn)で、交差點(diǎn)オブザーバーAPIは広範(fàn)なサポートを受けています。

ブラウザは、Caniuseのデータをサポートしています。これには詳細(xì)が含まれています。番號(hào)は、ブラウザがこのバージョン以降でこの機(jī)能をサポートしていることを示しています。

デスクトップ

モバイル/タブレット

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

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

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

 var Observer = new IntersectionObserver（callback、options）;

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

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

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

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

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

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

ユースケース1：レイジーロード畫(huà)像

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

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

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

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555311750.jpg" class="lazy" alt="交差點(diǎn)オブザーバーのいくつかの機(jī)能的な使用は、要素がいつ見(jiàn)えるかを知るためのいくつかの機(jī)能的な用途"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555481250.jpg" class="lazy" alt="交差點(diǎn)オブザーバーのいくつかの機(jī)能的な使用は、要素がいつ見(jiàn)えるかを知るためのいくつかの機(jī)能的な用途"><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174520555431263.jpg" class="lazy" alt="交差點(diǎn)オブザーバーのいくつかの機(jī)能的な使用は、要素がいつ見(jiàn)えるかを知るためのいくつかの機(jī)能的な用途">

殘りはスクリプトです。

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

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

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

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

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

畫(huà)像がビューポートのビューイング領(lǐng)域（デモンストレーションの下部の200ピクセル上）と交差すると、プレースホルダーの畫(huà)像を?qū)g際の畫(huà)像に置き換えます。

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

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

オブザーバーの準(zhǔn)備ができたので、そのobserve方法を使用してすべての畫(huà)像の観察を開(kāi)始する時(shí)が來(lái)ました。

 document.queryselectorall（ 'img'）。

それでおしまい！畫(huà)像をロードするのが面倒です。次のデモに移動(dòng)します。

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

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

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

交差點(diǎn)オブザーバーは確かにこれを行うことができます。

これがHTMLのビデオです：

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

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

ビデオ= document.queryselector（ 'video'）;
ispaused = false; /*ビデオを自動(dòng)的に一時(shí)停止するためのフラグ*/
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（ビデオ）;

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

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

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

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

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

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

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

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

私たちの簡(jiǎn)素化されたHTMLは次のように見(jiàn)えます：

<div></div>

<h2>第1條</h2>
<p></p>

<h2>第2條</h2>
<p></p>

n = 0とします。 /*表示された記事の総數(shù)*/
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は、読み取られた記事の総數(shù)を表します。次に、その番號(hào)を記事リストの上に表示します。

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

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

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

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

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

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

以上が交差點(diǎn)オブザーバーのいくつかの機(jī)能的な使用は、要素がいつ見(jiàn)えるかを知るためのいくつかの機(jī)能的な用途の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。