Intersection Observer API

date_range 2023/07/31
日々の活動日記エンジニアインターン
Intersection Observer API

こんにちは!

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


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/

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

*COMMENT*

  • 紀井 斎

    紀井 斎

    更新日:2023-07-31 17:03

    *コメント*

    スクロールした時の座標を見て、次のイベントのトリガーを作った記憶ありますわー
    ライブラリへの依存を防ぐため、jQueryは使わない方針なので、プログラミングのハードル高いと思いますが、ファイトです!

    *コメント*

*コメント*

*ログイン*

メールアドレス
パスワード

NEW