消えた要素を検知!Intersection Observer v2 実装術
CODE PREVIEW
P
プロンプト
Intersection Observer v2 を使って、複数のカード要素の可視状態をリアルタイムに色付きボーダーで表示するデモページを作成。スクロールコンテナ内でカードの位置はランダム、完全可視・部分可視・不可視を判別。
Intersection Observer v2 は、元のAPIを強化し、intersectionRatio や複数のしきい値(threshold)を設定できるようになりました。このデモでは、ランダムな縦オフセットを持つカードをスクロール可能なグリッドに配置し、可視状態をリアルタイムで色分け表示します。非表示(赤)→ 部分可視(オレンジ)→ 完全可視(緑)と変化するボーダーが、v2の強力な可視性検出を示します。
このプロンプトは役に立ちましたか?
コメント
コメントは承認後に表示されます