ロゴWeb開発ブログ

IntersectionObserverのthresholdsが効かないのは「見えている」割合ではなく「見えた」割合で指定してたため

作成

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)
なつちよ(プロフィールサイト)