JS API「IntersectionObserver」で、要素ごとに閾値を変更する方法

Question

当方js初心者です。

IntersectionObserver API
を使用して、「要素が画面内に入ったらclass付与」を実装しようとしています。

仕組みは簡単に実装できましたが、
可能であれば

「閾値（threshold）」を要素ごとに変化させたい

と考えております。

実行したいことの詳細

まず、
IntersectionObserver API　を読み込む前に、
optionsを以下のように設定しております。

const options = {
    rootMargin: '0px'
    threshold: 0.7
};

そしてhtml側、IntersectionObserver API対象要素には、以下のように記述しております。

<div class="box box02 js-dp" data-threshold="0.5">targetA</div>
<div class="box box02 js-dp" data-threshold="0.2">targetB</div>

そして私が叶えたい内容が、
「target要素にdata-thresholdがあれば、その要素に関しては、data-thresholdをthreshold値として設定する」
というものです。

以下、現在のjsコード

/* 
* 要素がウィンドウ内に入ったらclass付与（IntersectionObserver API）
* 「js-dp」classを持っている要素に-displayクラスを追加
*/
(function() {
  const options = {
    rootMargin: '0px',
    threshold: 0.7 // デフォルト値
  };
  const observer = new IntersectionObserver(callback, options);

  const targets = document.querySelectorAll('.js-dp');

  targets.forEach(target => {
    observer.observe(target);
  });

  function callback(entries) {
    entries.forEach(entry => {

      if(entry.isIntersecting) {
        entry.target.classList.add('-display');
      }
    });
  };
})();

この実装はそもそも可能なのか、という点でも疑問に思っております。
言葉足らずな点もあるかと思いますが、どうぞよろしくお願いいたします。

Answer 1

閾値は IntersectionObserver のインスタンス毎にしか設定できないので、要素毎に閾値を設定したければ要素毎にIntersectionObserverインスタンスを new するしかありません。

Comments

[nanigasi]

なるほど...!
なんとなくそうなのかな、と思っていましたが、しっかりと把握できました。
ありがとうございます！