Intersection Observerを活用したので使用例と一緒に紹介します
こんにちは！ KEPPLE CREATORS LABの Continuous Tech Improvement Team でエンジニアをやっている丸山です。
直近、スタートアップのデータベースサービス「KEPPLE DB」の機能開発の中でユーザーのスクロールアクションに応じて表示を変化させる要件がいくつかあり、要件を満たすために特定の要素が表示領域に入ったり出たりすることを監視できるAPI「Intersection Observer」を初めて使ってみました。
今回は、 Intersecion Observer を利用する上で注意すべきことをいくつか紹介します。
Intersection Observerとは
Intersection Observerは、ある要素が別の要素と交差する状態の変化を非同期で監視するAPIです。
例えば、画面をスクロールすると、スクロール可能な要素の子要素が見えたり見えなくなったりします。Intersection Observerを使えば、子要素が画面の可視領域に入ったときや出たとき、または可視領域内の占有率が一定値を超えたときなどに、コールバック関数を実行することができます。
具体的には、Intersection Observerを初期化するとき、監視対象の要素と、監視対象要素の交差を検知する基準となる要素（root）を指定します。rootには、監視対象要素の親要素や、ページ全体を表す document.documentElement など、任意の要素を指定できます。
監視対象要素とrootとの交差状態の変化を検知すると、Intersection Observerはコールバック関数を実行します。コールバック関数には、監視対象要素の交差状態に関する情報が渡されます。
Intersection Observerは、スクロールやアニメーションなど、要素の可視状態が変化する場面で、さまざまな処理を非同期で実行するのに便利なAPIです。
使用例1 複数コンテンツスクロール
複数のコンテンツが一枚ずつ縦並びで並んでいるケースでの使用例です。ユーザーは縦スクロールしながらコンテンツを読み進めており見ているコンテンツに応じてなにか行いたいシチュエーションです。
以下に、縦スクロールで複数のコンテンツにIntersection Observerを発行し、見ているコンテンツごとに背景色を変更する例を用意してみました。
IntersectionObserver multi content - StackBlitz
コンテンツそれぞれをIntersection Observerの監視対象に追加し、ビューポート内に100%表示されたコンテンツの文字色が背景色と同じになります。
こちらはKEPPLE DBでも似たような使い方をしています。KEPPLE DB では資料を閲覧する機能があり、閲覧する際のビューアーでどのページを読んでいるかのカウントを行う機能にIntersection Observerを使っています。
使用例2 stickyな要素がstickyになったタイミングを検知したい
ニッチな使い方かもしれませんがstickyがトリガーされたタイミングでなにかUIに変化をつけたい場合にもこのIntersection Observerは利用できます。
以下はsticky要素が複数存在しstickyになると背景色を水色にする例を用意しました。
IntersectionObserver sticky content - StackBlitz
rootMarginを使って判定領域をコントロールすることで上記のようにコンポーネントがstickyな状態を検知したり、様々な状態を検知したりすることができます。
利用する際の注意点
Intersection Observerを利用する際に気をつけとくと良いと感じた点を紹介します。
root要素に注意する
うまく機能しない場合は、まずrootが適切に指定されているかどうかを確認するのが良いでしょう。
スクロール可能な要素かどうか、階層は親子関係になっているかどうかなど見直してみてください。
私は試行錯誤しているうちにrootにスクロールしない要素を指定してしまっていてハマってしまうというかなり間抜けな経験をしました。
thresholdに注意する
基本的なことですがthresholdを指定しない場合の既定値は0になります。
より細かなスクロールの状態を取得した場合には適切な設定が必要です。
最初に[0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]と雑に指定しておいて後で必要に応じて調整するのをおすすめします。
ウィンドウサイズによってroot要素が小さくなり想定したthresholdを満たさなくなる
開発時は問題なく動いているように見えて端末を変えたりウィンドウを小さく表示するとうまく動かなくなってしまうケースがあります。
例1もroot要素に100%表示された時点で検知するように設定してるため縦幅が極端に小さくなると意図通り機能しなくなります。
こういった場合はrootMarginを使って検知の条件を定義し直しなおす必要があります。
例えばrootMarginを-50% 0px -50% 0pxにしてthresholdを0にすることでroot要素の中央部に交差したタイミングを検知するようにすることで対応することができます。
シチュエーションによってrootの領域をうまくコントロールして対応しましょう。
コンテンツの高さが初期描写時に確定していない場合
画像コンテンツの高さが初期描写時に確定していない場合、意図しないタイミングでcallbackが実行されることがあります。
これは、コンテンツの高さが変わるとその要素のrootに対する位置関係が変わり、それがIntersection Observerによって検出されるためです。
この問題を解決するためには、コンテンツの高さが確定するまでIntersection Observerの設定を遅延させる、描画が終わるまでroot領域分の要素を入れておく等々あるかと思います。
このように、コンテンツを表示する際に意図しない挙動をする場合は見直してみてください。
まとめ
以上、Intersection Observerの基本的な使い方と注意点について紹介しました。このAPIを使うことで、ユーザーのスクロール行動に応じた動的なUIを実現することができます。より良いUI・UXを提供するため今後も活用していきたいと思います。
WE ARE HIRING！
KEPPLE CREATORS LAB では一緒に働くメンバーを募集しています。
募集しているポジションの詳細はこちらをご覧ください。
▼KEPPLE CREATORS LAB ブランディングサイト
▼KEPPLE CREATORS LAB 求人一覧
この記事が気に入ったらサポートをしてみませんか？