IntersectionObserverの利用について

複数の要素に対してIntersectionObserverを利用する方法について。初回のみ（1回だけ）動作する方法を確認します。

参考コード

.targetが監視エリアに入ったら.is-showを追加する

const targets = document.querySelectorAll('.target');

// オプション
const option = {rootMargin: '0px 0px 100px 0px'}

// 監視用コールバック関数
const callback = (entries, observer) => {
  entries
    .filter(value => value.isIntersecting)
    .map(value => {
      value.target.classList.add('is-show');
      observer.unobserve(value.target);
    })
    ;
}

// 監視の宣言
const observer = new IntersectionObserver(callback, option);
targets.forEach(target => observer.observe(target));

コードについて

オプション

rootMarginを指定すると、監視エリアを設定できます。
参考コードの場合、ブラウザから100px下までエリアを拡大しています。つまり、ブラウザで見えるようになる100px手前から動作開始します。
指定の順番は{top, right, bottom, left}です。注意点として、pxや%など、単位を指定する必要があります。CSSのように0 0 100px 0とするとエラーになります。

監視用コールバック関数

コールバック関数の第一引数entriesは、インスタンスに登録した要素のリストです。第二引数observerは、インスタンス自身を指します。
isIntersectingプロパティで、要素が監視エリア内か判定できます。filterで監視エリア内の要素に絞り込んでいます。
observer.unobserve(value.target)で、インスタンスに対象要素の監視を終了するメソッドを実行させています。

監視の宣言

new IntersectionObserver(callback, option)でインスタンスを生成します。第一引数で、要素が交差する際に行うコールバック関数を指定します。第二引数で、オプションを指定します。
observer.observe(target)でインスタンスに監視する要素を一つずつ設定しています。

その他

途中でオプションを変更したい場合は、新しくインスタンスを生成してあげる必要があります。