ウェブにおいて、ある要素が他の要素と重なっているかどうか判定したいことは、よくあります。代表的な例としては画像の遅延読み込みがあります。画像が画面内に入ってきてから読み込むことで、負荷を抑えるテクニックです。しかし従来の方法は、パフォーマンスへの悪影響や、コードの複雑化など、様々な問題を含んでいました。 そこで、近年になって新しく導入されたIntersectionObserverを使えば、パフォーマンスへの影響を気にすることなく、要素の交差判定を簡単に実装することができます。 要素と要素の交差判定 画像の遅延読み込みやスクロールアニメーションを実装する際、「要素が画面内に入ってきたか」という情報が重要になります。これは「要素と他の要素(画面の場合はviewport)の交差判定」と言い換えることもできます。 要素の交差判定は、scrollイベントを監視し、scrollTopなどのプロパティを
![IntersectionObserverで要素が画面内に入ってきたかを判定する](https://cdn-ak-scissors.b.st-hatena.com/image/square/e0a745d3a98249c203ae0d9738f81ccc88b37ea3/height=288;version=1;width=512/https%3A%2F%2Fsbfl.net%2Fblog%2Fstatic%2Fassets%2Fogp.png)