IntersectionObserverを使ってスクロールのイベント処理は非同期にすべし

この記事ではIntersectionObserverの使い方を説明します。IntersectionObserverを使うと簡単にスクロールの非同期処理を実装することができます。

各ブラウザの対応状況

こちらは各ブラウザの対応状況です。IEはさておき、EdgeとSafariが一世代前のバージョンで対応していません。本格的に利用する場合はPolyfill*1を使用してください。

*1 Polyfill(ポリフィル)とは新しいAPIなどを未対応のブラウザ(古いブラウザ)で使用できるように保管してくれるアダブタのことを言います。IntersectionObserverのPolyfillは以下のボタンからダウンロードしてください。Polyfillをダウンロード

従来の実装とIntersectionObserverのメリット

これまでのスクロール処理は以下のような処理をつらつら書く必要がありました。

従来の処理では様々な条件をプログラマーが考慮して実装する部分が多く、記述が冗長な面がありました。
しかしIntersectionObserverを用いると簡単にスクロール処理を記述することができます。更にIntersectionObserverは非同期で処理を実行するため、ユーザーのスクロールを邪魔することがなく、スムーズなスクロールを実現することができます。

IntersectionObserverの使い方

#target要素が画面内に入ってきた際に発火するIntersectionObserverの書き方は次の様になります。

オプションのパラメータ説明

オプションの値は省略可能です。必要に応じて設定しましょう。

使用上の注意点

使用上の注意点
  1. rootMarginを使用する場合は必ずpxか%を使用する。また、%を使用する場合は必ずrootを指定しましょう。*1
  2. 一度作成したオブジェクトのプロパティー(root, rootMargin, threadhold)は変更できないので、違う値にしたい場合は新しくオブザーバーを作成しましょう。
  3. rootはトリガーしたい要素の祖先でなければならないため、rootはtargetを必ず囲んでいる要素を指定しましょう。
  4. IEと一部ブラウザでは対応していないので、polyfill(対応していないブラウザで正常に動くようにするスクリプト)をあわせて使用しましょう。

*1 指定していない場合は以下のエラーがコンソールに表示されます。
Uncaught DOMException: Failed to construct ‘IntersectionObserver’: rootMargin must be specified in pixels or percent.

Intersection Observerを使った実装例

使用例1. Viewportと要素の交差を判定

こちらのデモはすべてのタイルにobserverをセットし、Viewportに入ってきたタイミングで色を変更しています。


ソースを見る

Viewportとは?
Viewport(ビューポート)とはブラウザの画面内に現在表示されているエリアのことを言います。また、紛らわしいですが、<meta name="viewport"の様に記述されるmetaタグもViewportと呼ばれます。2種類の意味で使われる事があるので注意しましょう。

使用例2. thresholdの使用例

こちらはthresholdを使ったデモです。
thresholdに0~1の数字の配列を設定すると、そのしきい値で処理が実行されます。また、指定しない場合は[0]と同等です。
下のデモではthreshold: [0, 0.25, 0.5, 0.75, 1.0]を設定しています。


ソースを見る

使用例3 rootがViewport以外の場合の交差を判定

このデモではrootオプションにサイドバーを設定し、サイドバーのコンテナとサイドバー内の要素を交差を判定しています。
この様にrootに特定の要素を設定し、その要素との交差の判定も行うことができます。
*rootに設定する要素は、交差対象の要素の先祖要素である必要があります。

ソースを見る

コールバック時に参照できる情報

こちらはコールバック時に参照できる関数の一覧です。

IntersectionObserverに向いていない処理

現状使用していてIntersectionObserverが向いていないと感じるのは『2つの要素が交わるという条件を画面上で作りづらい場合』です。

例えば、基準となるtarget要素がない場所でスクロール処理を行いたい場合はwindow.addEventListener('scroll',()=>{});を使用したほうが制御が簡単になります。

(IntersectionObserverでできなくもないですが、この場合はscrollリスナーを使用する方が自然なのではないかと思います。まあ、考えて見れば当たり前ですね。)

実際、次の記事で上げているスクロール処理は特定のtarget要素がないため、scrollリスナーを使用しています。

スクロール中はHoverエフェクトを切ろう

まとめ

Intersection Observerを使用するとスクロール処理が簡単に記述できます。また、Polyfillを入れれば旧ブラウザの対応も問題ないです。

ユーザーのスクロール処理を邪魔することもなく、直感的にスクロール処理が記載できるIntersection Observer!おすすめです!是非使ってみてください。

次の記事

スクロール中はHoverエフェクトを切ろう

関連記事

レンダリングのパフォーマンス対策入門〜アニメーション、JSで困った時に

関連記事


Pjax Blog – Free WordPress Theme
Pjax Blogにはブログ作成に必要な機能が全て含まれています。初期設定はテンプレートを読み込むだけなので、PCが苦手の方でも大丈夫です!

もっとみる

最新記事