はじめに

スクロールを行った際、画面内に対象物が入った時にJavaScriptを実行するという処理を学習したため、まとめたいと思います。

もくじ

1. Intersection Observerとは
2. 基本的な記述
3. options
4. おわり

1. Intersection Observerとは

Intersection Observerをそれぞれ日本語にすると、以下のように訳されます。

このことから、Intersection Observerは「（物体の）交差を監視する者」という意味になります。

「物体の交差」とは、配置されている物体がスクロールされることで画面内（window内）に入ったり、出たりすることを「物体の交差」と表現されます。

そして、Intersection Observerはこの交差を監視しています。

2. 基本的な使い方

まずは、以下のようにnew IntersectionObserverへcallback関数を渡してあげ、それを変数io（Intersection Observerの略）とします。

const io = new IntersectionObserver(callback);

次に、どのDOMを監視するのか、監視対象のDOMを登録します。

const io = new IntersectionObserver(callback);

const item = document.querySelector('.item');
io.observe(item);

監視対象のDOMを登録するには、querySelectorで要素を取ってきて、それを変数に格納する。
と言う流れです。
上記のコードでは、class="item"がふられている要素を監視対象としたいため、classの要素をquerySelectorで取ってきて、それをitemという変数に格納しています。

そして、io.observe(item);とすることで、itemを監視対象に登録します。

こうすることで、登録されたitemが画面内に入ったり/画面外に出たりする時に、IntersectionObserverがそれを監視し、その度にcallback関数が呼び出されます。

画面内に入った時、出た時の定義方法

callbackの中身を記述していきます。

// const item = document.querySelector('.item');

const callback = function(entries, observer) {
  entries.forEach(entry => {
    if(entry.isIntersecting) {
      entry.target.classList.add('inview');
    } else {
      entry.target.classList.remove('inview');
    }
  });
}

// const io = new IntersectionObserver(callback);
// io.observe(item);

まず、entries.foreachでどの要素が入ったのか/出たのかを確認。
そして、foreachの引数をentryとします。
このentryの中に、それぞれの要素（今回ではitemが）が含まれています。

条件分岐のところでは、entry.isIntersectingがtrueの場合、つまり今回の場合では画面内にitemが入ればclass="inview"を追加(add)、falseであればclass="inview"を削除(remove)するという記述になります。

if(entry.isIntersecting) {
      entry.target.classList.add('inview');
    } else {
      entry.target.classList.remove('inview');
    }

entry.target.classList.add('inview');のtargetに、監視対象のDOMが格納されています。
そして、trueの場合そのDOMに対してclassの付与を行なっています(falseの場合はcalssを削除)。

監視対象が画面内に入った時点で監視を終えたい場合は、observer.unobserve(entry.target);と記述することで、監視を終了することができます。

const item = document.querySelector('.item');

const callback = function(entries, observer) {
  entries.forEach(entry => {
    if(entry.isIntersecting) {
      entry.target.classList.add('inview');

      observer.unobserve(entry.target); // ← 画面内に入ったタイミングで監視を終了

    } else {
      entry.target.classList.remove('inview');
    }
  });
}

const io = new IntersectionObserver(callback);
io.observe(item);

3. options

Intersection Observerは第二引数にoptionsを取ることができます。
こんな感じ。

const io = new IntersectionObserver(callback, options);

optionsの定義は以下のように記述します。

const options = {
    root: null,
    rootMargin: "-100px 0px 0px 0px", // 上 右 下 左
    threshold: [0, 0.5, 1]
};

主なプロパティです。

4. おわり

スクロールするたびに画像がぽんぽん出てくるサイトの裏側はこういう風になってるのかな。
Intersection Observer、上手に使いこなせるようになるぞ！