【Tips】IntersectionObserver API(交差監視API)

いつ使う

• Twitterのような無限スクロール（遅延読み込み）
• 広告費用を計算するための広告が表示されたかどうかのレポート
• ユーザーが対象を見るかによって、タスクやアニメーションの実行分岐

様々な場面で「要素の交差を検出する実装」は必要とされます。
ポピュラーな実装方法としては、scrollイベントで画面の高さやスクロール後の位置を取得する
方法が考えられますが、如何せんスクロールの度に発火するので負荷が大きいです。
本稿ではscrollイベントは使わず別の手法を取り上げます。
（scrollイベントの最適化に関しては、下記リンクが参考になると思います）
https://qiita.com/hiro0218/items/7ac41f58891d96951fa1
https://qiita.com/damele0n/items/f4050649de023a948178

IntersectionObserver API

交差監視APIという意味で、監視対象とする要素の交差によりイベントが発火します。
scrollイベントを使った手法とは違い、ビューポートサイズの変更による影響を受けず、
さらにスクロールの都度実行されるということもないのでパフォーマンス向上が期待できます。
googleトレンドを見る限りまだまだマイナーみたいですが、知っておいて損はないと思います！

基本的な使い方

js

$(function () {
   var boxes = document.querySelectorAll('.targets'); // 監視対象とする要素
   var boxesArray = Array.prototype.slice.call(boxes, 0); // Arrayのメソッドを借りて配列化
   var options = {
      root: null, // 交差監視をする範囲。nullの場合ビューポートとなる。
      rootMargin: '10px', // 上記の範囲を拡大縮小指定する。
      threshold: 0, // 発火条件となる要素の交差割合を閾値(0~1)で指定。
   };

   //　コンストラクタ。各ターゲット要素の監視、イベントの発火を担う。
   var observer = new IntersectionObserver(doWhenIntersect, options);
   boxesArray.forEach(function (box) {
      observer.observe(box);
   });

   //　イベント発火時の処理を指定。
   function doWhenIntersect(entries) {
      var entriesArray = Array.prototype.slice.call(entries, 0);
      entriesArray.forEach(function (entry) {
         if (entry.isIntersecting) {
            console.log(entry + 'が交差しました！');
         }
      });
   }
});

注意点

現状IE11はIntersectionObserverに対応していませんので、別途polyfillを読み込ませる必要があります。

if (!('IntersectionObserver' in window)) {
    appendScript("https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver");
}