Intersection Observer API

2023/07/31

日々の活動日記エンジニアインターン

こんにちは！

クリエイティブプロダクト部クオリティコントロール班インターン生の老沼みほです！

Intersection Observer API

JavaScriptでコードを書くとき、スクロールイベントをしたいと思うときに
addEventListener('scroll')というイベントリスナーを使うことが多いのではないでしょうか？
私も実際に多用しています。
しかし、スクロールイベントの際にaddEventListener('scroll')を使うと、スクロールするたびにイベントが処理されてしまうということがあります。

これを解消したい...
解消できる画期的なツールIntersection Observer API
というAPIがあります！
このAPIは日本語訳通り交差する要素を監視してくれるAPIです！
Intersection(交差点)
Observer(監視者)
このAPIを使用すれば、要素が指定したポイントに交差したときにのみイベント処理されるためスクロールするたびに動作してしまうということはなく無くなります！

また、スクロールでのイベントの数が多ければIntersection Observer APIを使った方がスムーズに動かすことができます！

今回のアウトプットはどうでしたでしょうか。

今回は中々難しいものであったので、説明がとても難しかったです。

より伝えられるよう今後も工夫してアウトプットを行っていきたいと思います。

API：ソフトウェアやアプリケーションなどの一部を外部に向けて公開することにより、第三者が開発したソフトウェアと機能を共有できるようにしてくれるもの。

-------------------------------------------------------------------------------------------------------------------

フロントエンドエンジニアコースのインターン：https://guardian.jpn.com/recruit/intern/frontendengineer/

メンバー紹介ページ：https://guardian.jpn.com/member/miho_oinuma/

--------------------------------------------------------------------------------------------------------------------