IntersectionObserverについて説明します.

https://unsplash.com/photos/42t-DKecmPk

TOC

1.IntersectionObserverとは.
2.心を開いて理解しよう.

1.IntersectionObserverとは。

Web上でビューポートに基づいてobserver機能を担当する正式なAPIです.
すなわち、現在のクライアントが表示している画面に基づいて、画面に表示される内容がどれだけであるかに応じて、特定のコールバック関数を実行することができる.
同様に、eventListenerはイベントの発生を待つ.
ただし、メインスレッドの負荷が大きすぎるscrolleventでは、スクロールが発生するたびに再レンダリングが要求され、パフォーマンスに問題が発生する可能性があります.
逆にobserverは、vpに特定の要素が入っているかどうかを確認し、コールバック関数を実行します.これにより、安価でパフォーマンスの向上に役立ちます.
もちろん、すべてに取って代わるのは容易ではありません.巻物を感知するものも必ずあります.

2.心を開いて理解する

const options = {
  rootMargin: "25px",
  threshold: 1.0
};
const io = new IntersectionObserver((entries,observer) => {
  entries.forEach((entry) => {
    console.log(entry);
    if (entry.isIntersecting) {
      console.log(entry.isIntersecting);
      //   io.unobserve(entry.target);
    } else console.log(entry.isIntersecting);
  });
}, options);
io.observe(document.querySelector("div"));

以上のコードを例

1. 
   

   ioはobserverオブジェクトを生成します.

   
   
2. 
   

   observerオブジェクトには、=&の2つのパラメータがあります.gt; [0] entries, [1] observer

   
   
3. 
   

   [0]entriesは観察されたDOM要素を指し、コールバック関数を実行するのにどれだけのアクセス(ターゲット)vpが必要かを詳細に決定する方法を提供する.(!!!) entries = 배열

   
   
4. 
   

   [1]observerは、現在コールバックが実行されているオブジェクトインスタンスを参照します.(インスタンスはクラスのコピーです.)

   
   
5. 
   

   io.observe(elements)はioを使用して作成されたobserverオブジェクトが要素の観察を開始することを示します.

   
   
6. 
   

   io.unobserver(elements)は観察を終了することを示す.

   
   

上記の例のコードは、スクロールイベントではなくvpに特定のdivを加えたときに特定のイベントを励起する.

無限スクロールを作成できます