IntersectionObserverのthresholdをわかりやすく紹介

前回はIntersectionObserverのrootMarginを紹介しましたが、今回はそんなIntersectionObserverのようわからん変数2個目「threshold」について。

ぶっちゃけどっちでも似たようなことができるんですが、thresholdはちょっとクセがある気がするんであんまり私は使ってません。ではそんなthresholdのクセ含め、どうぞ。

1. thresholdとは
2. thresholdの例
3. thresholdのクセ
4. まとめ

thresholdとは

IntersectionObserverのthresholdとは？から見ていきましょう。

そもそもthresholdてのは日本語でいうと閾値（しきい値）て意味で、閾値ってのは「○○人超えたら××する」みたいなそういう基準になる数字のこと。今一番わかりやすいたとえだと、コロナの緊急事態宣言を再発令する閾値、みたいな使い方ですね。

IntersectionObserverはある特定のブツがディスプレイに現れたらなんかする、っていう機能なので、そのthreshold、閾値てことはその特定のブツがどれくらいディスプレイに表示されたら、てのを指定できるって事になります。

半分見切れたらなんかする、ディスプレイに全部入ったらなんかする、1ミリでもディスプレイに入ったらなんかする、みたいな感じ。

thresholdの例

thresholdの値を0にすると、

1. ブツが1ミリでも画面に入ってきたらイベント発生
2. ブツがぜんぶ画面外にはけたらイベント発生

反対にthresholdの値を1にすると、

1. ブツが全部画面に収まりきるとイベント発生
2. ブツがちょっとでも画面外に見切れるとイベント発生

てな具合です。

そう、2回発生するんですよね。

thresholdのクセ

んでthresholdを使いづらいなーと思うクセを。

さっきの例でthresholdを1にしたとき、「①ブツが全部画面に収まりきるとイベント発生」てあるんですが、これがけっこう不安…。

何かっていうと物のサイズが大きすぎて画面より大きいとかだと一生このイベントが発生しなくなるんですよね。例えば写真をふわっと表示するのにthresholdを使ってたとして、縦長の写真で画面より大きかったりすると表示されなくなる可能性がある。

あくまで画面にブツがぜんぶ収まりきったら○○する、って処理になるんで、スマホやパソコンなど画面サイズがちぐはぐな現状だともしかすると発生しないかも、を考えなくちゃいけない。

なのでぼくがIntersectionObserverを使うときはthresholdはずっと0で使ってます。thresholdの値が0なら画面に1ミリでも映り込んだらイベント発生してくれるんで、ブツのサイズを気にせず実装できてラクチン。

イベントのタイミングを早めたい、遅めたい、というのはこの間紹介したrootMarginの方で対応しちゃえばOK。

まとめ

IntersectionObserverのthresholdについて紹介しました。

とにかくクセが強いのがthresholdで基本は0で使うのがやりやすい…と思います。thresholdを大きくしちゃうと画面サイズとブツのサイズを気にしなくちゃいけないのがしんどい。

イベント発生のタイミングはrootMarginの方でいくらでも調整できるんで特殊なことをしない限りthresholdは気にしないでイイ、と思います。