交差監視IntersectionObserverについてツイート@2018/12/14スポンサーリンク画面スクロールによりある要素を画面表示に入ってきたら、あるイベントを引き起こせるニーズがあるかもしれない。言うと、画面ファストビューに入ってない画像やコンテンツなどを非同期に表示すれば、ユーザに快適的にページを閲覧ができます。画面スクロールは頻繁に起こして、ブラウザの重くなる原因になります。近年になって新しく導入されたIntersectionObserverを使えば、パフォーマンスへの影響を気にすることなく、要素の交差判定を簡単に実装することができます。IntersectionObserverは現在のところ一部のブラウザが対応していません。(IEやsafariが未対応)そのため、実装する前に必ずブラウザの対応状況を確認してください。言っても、交差監視IntersectionObserverは非常にシンプルな機能のため、今後の主流ブラウザは対応する可能性が高いと信じてます。以下はデモページでソースコードでは、コピペで利用できるので、ぜひお試してみてください。'が完全視界に入りました。'が視界から去りました。'の一部が視界に入っています。実業務の場合、非同期でサーバから取得した内容を、引数でID指定した要素にセットして表示。'最新の内容を取得しました。当記事がお役に立ちましたらシェアして頂ければ嬉しいです。当記事を閲覧の方は下記の【関連記事】も閲覧していました。1234の順で設定できるはず。