タグ

2022年8月23日のブックマーク (1件)

  • IntersectionObserverで要素が画面内に入ってきたかを判定する

    ウェブにおいて、ある要素が他の要素と重なっているかどうか判定したいことは、よくあります。代表的な例としては画像の遅延読み込みがあります。画像が画面内に入ってきてから読み込むことで、負荷を抑えるテクニックです。しかし従来の方法は、パフォーマンスへの悪影響や、コードの複雑化など、様々な問題を含んでいました。 そこで、近年になって新しく導入されたIntersectionObserverを使えば、パフォーマンスへの影響を気にすることなく、要素の交差判定を簡単に実装することができます。 要素と要素の交差判定 画像の遅延読み込みやスクロールアニメーションを実装する際、「要素が画面内に入ってきたか」という情報が重要になります。これは「要素と他の要素(画面の場合はviewport)の交差判定」と言い換えることもできます。 要素の交差判定は、scrollイベントを監視し、scrollTopなどのプロパティを

    IntersectionObserverで要素が画面内に入ってきたかを判定する