Intersection Observer API(範囲の指定応用)

Intersection Observer API(範囲の応用)

thresholdを書いているところに追加する。
種類は大きく分けて２種類
1.root:null
→nullがデフォルト。細かく指定できる。％の
2.rootmargin:'0 0 0'
→marginをつける時と同じようにして書く。

ex)

  const target = document.querySelector('img');

  function callback(entries) {
    console.log(entries[0]);

    if (!entries[0].isIntersecting) {
      return;
    }

    entries[0].target.classList.add('appear');
  }

  const options = {
    threshold: 1,
    rootMargin: '0px 0px -100px',
  };

  const observer = new IntersectionObserver(callback, options);

  observer.observe(target);