1)はじめに スクロールに追従して、 画像の遅延ロード YouTubeの自動再生 コンテンツの追加読み込み といったことを行いたい。 このようなケースにおいて、今まではスクロールイベントをフックとして実装することがほとんどでした。しかし、頻繁に実行されるスクロールイベントは、ブラウザにとって優しい処理とは言えず、特にスマホではスクロール詰まり(Scroll Jank)を引き起こしてしまうこともありました。 そこで登場する、比較的新しいAPIがIntersection Observerです。 今回はその利用方法について模索してみます。 2)Intersection Observerとは その名の通り「Intersection(要素間交差)」を「Observe(監視)」するAPI。 任意の要素(DOM)同士の交差を監視することが出来ます。 デフォルトでviewport(見えている範囲)とある要
![使ってみよう!Intersection Observer! - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9c0058882b6c6a53e5172c399674d5bc25115ed/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJTg4JUUzJTgxJTg2JUVGJUJDJTgxSW50ZXJzZWN0aW9uJTIwT2JzZXJ2ZXIlRUYlQkMlODEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWZkZDZhMTliY2M5YTJkMjlkMzU2ODY5ZWQyNzA3ODM3%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwcnlvX2hpc2FubyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZjE4Yjg4ZmEzZmUwNjJhYTE3ZTM3ZTE5NGRmZGZlYWU%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D71c83dd1383574c97afa815e92c29d4c)