はじめに
CodePenでIntersection Observerを利用したら、なんだかうまく機能していなかった。具体的には、rootMarginが効いていない。
具体例
下記のコードはカードが中央線に重なった場合に背景をカードと同じ色にするように書かれていますが、下からカードが頭を出した瞬間に背景がその色に変更されています。つまり、交差判定がviewport(screen)全体になっています。
See the Pen
Untitled by Zakime (@zakime)
on CodePen.
解決方法
埋め込みの問題でその辺がアレってると思うので、いつ使うのかよく分からなかった rootオプションで解決しました。
CodePenのプレビュー画面と同じ大きさの要素を作って固定し、その中で表示します。
具体的には、コード全体をwrapで囲ってfixedで固定。
See the Pen
How to get IntersectionObserver's rootMargin to work correctly in CodePen by Zakime (@zakime)
on CodePen.
とりあえず問題解決！
※ただし、スクロールイベントが発火しなくなります…ﾋﾟｴﾝ
↧