【javascript】Intersection ObserverAPIを使ってスクロールイベント

「Intersection ObserverAPI」を使ってスクロールを監視し、ターゲットが画面内に入った時に処理を実行する方法の備忘録

「Intersection ObserverAPI」を使ったスクロール監視＆イベント実行方法

まず、「Intersection ObserverAPI」を使い、画面内に入ったら「一度だけ発火」し、consoleに画面内に入った要素を出力をするサンプルコード。
※console.logは埋め込みできないので、codepen側で確認してもらう必要あり

See the Pen
【javascript】Intersection ObserverAPIを使ってスクロール監視 by twotone (@twotone-me)
on CodePen.

ソースコード全体としては以下のような構成になっている。

<style>
  .div {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

<div class="div" style="background: red;">テスト1です</div>
<div class="div" style="background: blue;">テスト2です</div>
<div class="div" style="background: green;">テスト3です</div>
<div class="div" style="background: yellow;">テスト4です</div>
<div class="div" style="background: pink;">テスト5です</div>
<div class="div" style="background: white;">テスト6です</div>

<script>
  let elements = [].slice.call(document.querySelectorAll(".div"));
  // 要素が画面内に入ったときの処理用関数
  let elementObserver = new IntersectionObserver(
    function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let element = entry.target;
          // ここに要素が画面内に入ったら実行したい処理を書く
          console.log(element);
          // 監視終了（設定しないと何度も発火する）
          elementObserver.unobserve(element);
        }
      });
    }, {
      // Intersection observer のオプション
      rootMargin: "0px 0px 10% 0px"
    }
  );
  // 処理の実行
  elements.forEach(function(element) {
    elementObserver.observe(element);
  });
</script>

従来のscrollイベントと比べると以下のようなメリットがある。

• scrollイベントは常に発火し続けるが、Intersection ObserverAPIは画面に入る時のみ発火なのでパフォーマンスがいい
• scrollイベントが使えない慣性スクロールサイトでも使える

現場では、「Intersection ObserverAPI」が使われるのが当たり前になっている。また、使っていて困るケースはほぼないので、スクロールイベントは「Intersection ObserverAPI」のみで良いと思われる。

「IE11」に対応させる場合は「pollyfile」を読み込む必要あり

「IE11」に関しては、2022年6月16日にサポート終了しているので、対応する必要性はないが、対応するのであればこちらからpolyfillをダウンロードして以下のように設置。

<script src="./intersection-observer.js"></script>

「IE11」の時だけ処理を分けたいのであれば、以下のように条件分岐で対応可能。

if (!('IntersectionObserver' in window)) {
	// IE11の時の処理
}