Webページをスクロールして特定のHTML要素に達したらアニメーションを発生させたかったので、IntersectionObserverを使ってみた。
要素に達したらすぐ発生させるのでなはく、少し過ぎたあたりで発生させたかったのでthresholdsを0.3に設定した。
これでページをスクロールして要素の30%が見えたらアニメーションが発生すると思ったが何も起きない。
thresholdsは「見えた」割合ではなく「見えている」割合の閾値だった。
たとえば、画面サイズが横400px、縦600pxのスマホで見ているとする。
対象の要素は横400px、縦3000pxとする。
縦長の要素を画面の横幅いっぱいに表示されている状態。
そうすると要素が画面に見えている(交差している)面積は最大でも画面サイズの2400(400px × 600px)である。
一方、要素の面積は12000(400px × 3000px)もある。
このとき要素が画面に見えている(交差している)面積の割合は20%(2400 ÷ 12000)となる。
そのため、いくらスクロールしてもthresholdsに設定した30%を超えることはないためアニメーションも発生しなかった。
この場合、thresholdsを0.2未満に設定すれば無事思った通りの動作となった。
作成したもの(実際に使用したのはreact-intersection-observer)
なつちよ(プロフィールサイト)