スクロールイベントの代わりにIntersection Observerを使ってみよう

スクロールして要素が見えたらアニメーションさせたりする場合、スクロールイベントで実装することが多いのですが、常にスクロール量を監視する必要があり、要素が多い場合、負荷がかかりすぎて処理が重くなることがあります。

この解決方法として、Intersection ObserverというAPIがあります。
Intersection Observer APIとは、要素間の重なりを監視することができるAPIです。
デフォルトではviewportと要素の監視となるのでスクロールイベントの代わりとして使用することができます。
弊社で実装を担当させていただいたFUSIONKNITもIntersection Observerを使用してます。

実装方法

画面の下部から100pxの位置に要素が入ってきたときアニメーションさせるような場合、jQueryで実装すると下記のようになります。

let
  target = $(‘.target’),
  isAnimated = false; // アニメーションが実行された場合のフラグ
$(window).on(‘load’, ()=>{
  let
    sy = $(window).scrollTop(), // スクロール位置
    pos = target.offset().top - $(window).height() - 100; // 要素をアニメーションさせる位置
  if( isAnimated && sy >= pos ) {
    isAnimated = true;  // フラグ処理
    // アニメーションのイベントを記述
  }
});

これをIntersection Observerで実装すると下記のようになります。

const
  target = document.querySelector(‘.target’),
  observer = new IntersectionObserver((entries)=>{
    entries.forEach((entry)=>{
      if( entry.isIntersecting ) {
        observer.unobserve(target); // 監視を停止
        // アニメーションのイベントを記述
      }
    });
  }, {
    rootMargin: ‘0px 0px -100px 0px’
  });
observer.observe(target);

上記を元に作成したデモはこちら。

Intersection Observerはまだ草案の段階ですが、Can I useを見ると、IE11以外の主要ブラウザはほぼ対応しております。
IE11でもPolyfillを読み込めば使用できますので積極的に導入してみたいと思います。