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

JavaScript / jQuery
この記事は約2分で読めます。

どうも上かるびです。

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

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

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

ネコーダー
ネコーダー

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

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

 

スポンサードサーチ

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

 

まず結論から。

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

 

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

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以外じゃないとダメなケースに出会ったことがありません。。。

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

コメント

タイトルとURLをコピーしました