IntersectionObserver とは何ですか? IntersectionObserver の概要

この記事では、IntersectionObserver とは何ですか? IntersectionObserver の紹介は一定の参考になりますので、困っている方は参考にしていただければ幸いです。

ターゲット要素とその祖先要素またはウィンドウとの交差状態を追跡できます。さらに、要素の一部だけがビューポートに表示される場合でも、たとえ 1 ピクセルだけであっても、コールバック関数をトリガーすることを選択できます。

IntersectionObserver なぜ必要なのでしょうか?

ターゲット要素がビューポートに入ったかどうかを監視する必要がある場合、大量の計算がパフォーマンスの問題を引き起こす可能性があります。

IntersectionObserver 方法この問題を解決するために？

IntersectionObserver API は非同期であり、ターゲット要素のスクロールと同期してトリガーされません。つまり、オブザーバーはスレッドがアイドル状態のときにのみ実行されます。これは、このオブザーバーの優先度が非常に低く、他のタスクが完了し、ブラウザーが空いている場合にのみ実行されることを意味します。

IntersectionObserverEntry オブジェクト

new IntersectionObserver(callback, options)

    let observer = new IntersectionObserver((e) => {
        let isintersecting = e[0].isIntersecting
        console.log(e[0].intersectionRatio)
        if (isintersecting) {
            console.log('我出来了');
        }else{
            console.log('我隐藏了');
        }
    }, {
        root: null
    })
    
    // 观察某个目标元素，一个观察者实例可以观察任意多个目标元素。
    observer.observe(document.querySelector('.scroll-down'))

IntersectionObserverEntry オブジェクトは、合計 6 つの属性を持つターゲット要素に関する情報を提供します。

{
time: 可視性が変化する時刻。ミリ秒単位の高精度タイムスタンプです。
target: 監視されているターゲット要素。DOM ノード オブジェクトです。
rootBounds: ルート要素のgetBoundingClientRect() メソッドの戻り値である長方形領域に関する情報。ルート要素がない場合 (つまり、ビューポートに対して直接スクロールしている場合)、null が返されます。
boundingClientRect: の長方形領域に関する情報ターゲット要素
intersectionRect: ターゲット要素とビューポート (またはルート要素) の交差領域に関する情報の間
intersectionRatio: ターゲット要素の表示比率、つまり、intersectionRect とboundingClientRect の比率完全に表示されている場合は 1、完全に非表示の場合は 0 以下です。
}

オプションには主に

{
    root: null, // 指定与目标元素相交的根元素，默认null为视口
    threshold: [] // [0, 0.5, 1] 当目标元素和根元素相交的面积占目标元素面积的百分比到达或跨过某些指定的临界值时就会触发回调函数
    Magin：‘’ // "100px 0" 与margin类型写法，指定与跟元素相交时的延时加载
}

インスタンス メソッド

observe()

## が含まれます#特定のターゲット要素を監視します。オブザーバー インスタンスは、任意の数のターゲット要素を監視できます。ここで学生の中には「委任してもいいですか?」と尋ねる人もいるかもしれないことに注意してください。生成されていないものも含め、ページ内のすべての img 要素を観察するには、observe メソッドを 1 回呼び出すだけでよいでしょうか?答えは「いいえ」です。これはイベントではなく、バブルなどありません。

unobserve()

特定のターゲット要素の監視をキャンセルする場合、通常、observe のコールバックはその要素に対して unobserve() を直接呼び出す必要があります。

#disconnect()

観察されたすべてのターゲット要素の観察を解除します

takeRecords()

このメソッドを理解するには、ブラウザ内、オブザーバーのときなど、基礎となる何かについて話す必要があります。インスタンスは、特定の瞬間に複数の交差するアクションを監視しますが、コールバックはすぐには実行されません。window.requestIdleCallback() (現在は Chrome でのみサポートされています) を呼び出して、指定したコールバック関数を非同期に実行します。また、最大遅延時間も規定します。は 100 ミリ秒で、ブラウザが次を実行するのと同等です:

requestIdleCallback(() => {
  if (entries.length > 0) {
    callback(entries, observer)
  }
}, {
  timeout: 100
})

以上がIntersectionObserver とは何ですか? IntersectionObserver の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。