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 つの属性を持つターゲット要素に関する情報を提供します。

オプションには主に

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

インスタンス メソッド

observe()

#disconnect()

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

takeRecords()

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

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

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