IntersectionObserver、使い方（理解編）。

IntersectionObserverEntry？

またもや謎の存在が登場しました。
IntersectionObsererEntryとは、target/rootの位置や状態などの「交差部分の情報」が入ったオブジェクトです。
IntersectionObserverの実装では、この情報を利用することが多々あります。

entryの中にはたとえば、「isIntersecting」というプロパティが含まれています。
このプロパティは、「交差しているかどうか」の真偽値を返します。
このプロパティを参照し条件分岐することで「交差しているときだけ〇〇する」というような実装が可能です。

function callback(entries) { 「「１console.log(entries);」」 }

IntersectionObserverEntryは交差の状態変化が起きると、そのつど生成されます。
試しに引数を出力する処理を記述し、observerを発動させてみます。

「「３>>出力結果」」 Array [ IntersectionObserverEntry ]

出力結果をみてみると、オブジェクトを配列化したものであることがわかります。

IntersectionObserverEntryは交差状態が変化するたびに新しく生成されるにも関わらず、なぜ配列状態にする必要があるのか。
それは、⬇︎のようなケースが考えられるためです。

ターゲットが完全な横並びで２つ存在したとき、ルートに対して同時に重なることになります。
そうすると交差情報のオブジェクトは２種類のものが同時に生成されることになります。

同時に生成された２つが、InterSectionObserverEntryの配列要素として追加されることになります。
１回の生成時に２個以上の交差情報が含まれることがある、配列形式が採用されているのはこのためです。

rootMargin。

rootMarginは、root要素に対して作用させるオプションです。「交差の有効範囲」を変化させることができます。

rootMargin:'〇〇%'

値はpx（絶対値）または%（相対値）を使用します。
記述の際は値をクオテーション「 ' ' 」「 " " 」で囲んでください。

rootMarginの初期値は0で、この場合交差の有効範囲は要素領域そのものです。
⬆︎ではrootとtargetは離れているので、もちろん「交差していない」と判断されています。

let options = ｛ bbrootMargin:「「１"30%"」」 bb｝;

ここで＋領域にマージンを取ってみました。

rootの有効範囲が外側に30%広がります。targetに少し被る状態となりました。

要素同志は離れているものの有効範囲が重なったため、これは「交差している」と判断されるように成増。

let options = ｛ bbrootMargin:「「１"-20%"」」 bb｝;

こんどはマイナス側にマージンを取ってみます。

有効範囲が小さくなりました。

そうするとtargetはrootそのものに重なっていたとしても、有効範囲外であれば「交差していない」と判断されてしまいます。

これまでの例ではrootMarginに指定した値は「〇〇%」と１つのみでした。
しかしこれでは、上下左右にまんべんなくmarginが取られてしまいます。

特にrootMarginをマイナス側に取り、target要素が細長い場合。
2人はいつまで経っても交差することのない、運命に陥ります。

rootプロパティはCSSのmarginのように、「縦横別」「上下左右別」に指定することができます。

「「３//縦-20、横はそのまま」」 rootMargin:"-20% 0%"

縦方向のみ縮めることができました。これで細長ターゲットもキャッチできます。

threshold。

こんどはtarget側に指定するプロパティ。
thresholdは「境界、しきい値」という意味で、「target領域の何パーセント以上が重なったら交差しているとみなすか」を指定します。
逆に指定以下の割合で重なっていても、「交差していない」とみなされます。
値表記は0〜1の範囲で行います。1が100%、0が0%を意味します。

let options = { threshold:0.5 }

例えば0.5(50%)とした時の動きを見てみます。

今はまだ完全に離れている状態。ここからスクロールしていきます。

少し重なりました。しかしまだtargetの25%程度しか重なっていないので、「交差した」とはみなされません。

もう少しスクロールして、targetの50%がルートに重なりました。ここで初めて「交差した」とみなされます。

その後ターゲットはルートの領域を通り過ぎていきます。

ターゲットの重なり部分が50%以下になったところで、「離れた」と判定されます。

「threshold0.5」は、「ターゲット領域の重なりが50%以上なら『交差』、50%未満なら『交差していない』と判断される」ということです。つまりターゲット領域の50%を基準に交差状態が切り替わり、コールバック関数が実行されることになります。

thresholdの初期値は「0」です。さっきの言い方で言えば「ターゲットの重なりが0%以上であれば「交差」、0%未満なら「交差していない」と判断」されます。
そのためごくわずかでも重なればコールバック関数が実行され、離れる時には完全に重なりがなくなるまで関数は実行されません。

thresholdが複数？

let options = { threshold:[0.25,0.5] }

thresholdの値は複数指定することもできます。その場合、角カッコ内にカンマで区切って記述します。
するとどうなるのでしょうか？

「変化のきっかけ」が1つのターゲットに複数存在することになります。

「きっかけ」に指定されているのは、25%と50%。
それぞれの割合において「交差した/離れた」の状態変化が起きるたびにcallback関数が呼ばれます。

１ 「25%重なった！」
２ 「50%重なった！」
３ 「重なりが50%以下になった！」
４ 「重なりが25%以下になった！」


重なりの推移とともに、段階的に処理をしたい場合にはつかえそうですね（←いまのところ使い道が思いつかない「ふ」ではあります）。

root。

let options = { root:「「５element」」 }

rootプロパティは、「交差を待ちかまえる側」をどの要素にするかを指定します。
初期値はviewport、つまりデバイスの画面となっています。

特定の領域内スクロールで交差判定したいときなどには、値に指定してやりましょう。