【Intersection Observer API】option{root:null}以外の活用方法

どうも上かるびです。

画面内に入ってきた処理に関してはIntersection Observer APIを使って実装しているのですが、前から気になっていたことがあります。

「オプションの「root:null」はnull以外を指定する場合、どんな活用方法があるのか？」ということです。

おそらくですが１つの活用方法を自分なりに見つけたので共有します。

ネコーダー

この記事ではIntersectionObserverの使い方などは解説しません。

もし使い方を知りたい方は下記ページを参考にするとよいです！

JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA

ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptのscrollイベントで実装していましたが、IntersectionObserver APIを使うとより効率的に実装できます。ブラウザーのサポートも拡充し、今後は標準となる技術でしょう。

ics.media

スライダーなどのスクロール箇所で活用できる

まず結論から。

ずばりスライダーやスクロールができる箇所で活用できると分かりました。

横幅指定のあるスライダーを例に考えてみます。

root:nullを指定した場合、画面全体が監視範囲になります。

ついでにrootMarginを右から50%になるように指定すると下図のようになり、ターゲットが紫の中に入ったときに交差することになります。

スライダーがあった場合、↓のようなイメージ。

右からスライドしてきて、画面の中央で交差します。

それではboxというクラス名で囲まれたスライダーが中央以外に配置されている場合を考えてみます。（うまい例が見つからなかったのは許してください）。

同時にrootをnullからboxに指定します。

こうすると、box内での右から50%のところが交差点になります。

nullのときであれば画面中央にきた時点で交差されますが、boxにしたことで交差されなくなっています。

DEMO（デモ）

上記例のデモを作ってみました。

optionsのrootを切り替えてみて、動作を確認してみると分かりやすいかなと思います。

See the Pen
[ Intersection Observer API ]root option without null by Hayato Kamiyama (@kami8ma8810)
on CodePen.

実務で使う場面はあるのか？

つっても今のところnull以外じゃないとダメなケースに出会ったことがありません。。。

もし今後使う機会があればまた紹介したいと思います。