IntersectionObserverについて説明します.

TOC

1.IntersectionObserverとは。

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を加えたときに特定のイベントを励起する.

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