Intersection Observer API の使い方


概要

こちらを参照

大まかな使い方

  1. オプションを決める
  2. コールバックを決める
  3. IntersectionObserver オブジェクトのインスタンスを生成する
    第一引数にコールバック。第二引数にオプション
  4. IntersectionObserver オブジェクトの observe メソッドで、監視する対象を設定する。
  5. 対象が監視条件に入ったら、コールバック
  6. IntersectionObserver オブジェクトの unobserve メソッドで、監視する対象を解除する。
  7. 実際に動かしてみる デモンストレーション

オプション

オブジェクトで渡します。


オプションの例

let option = {
root: null (対象のDOM nullの場合は viewport) ,
rootMargin: '0px',
threshold: [0.0,1.0]
};

コールバック

引数に設定されたコールバックには、コールバックが呼び出される際に
引数に監視対象のリスト(Intersection observer オブジェクトのメソッド observe (対象) で設定されたもの全て (Intersection observer entry オブジェクト))が、 第一引数で渡され
第二引数には、Intersection observer オブジェクト自身が渡されます。


コールバックの例

function callBack( entrys , observe ){
entrys . forEach ( function (entry) {
console . log ( entry ) ;
});

}
「しかし、なんでみんなforEach でループ回すのかねえ?」

インスタンスを作成する

const observer = new IntersectionObserver ( callback , option ) ;

observe メソッドで、監視対象を設定する

observer . observe (監視対象)

監視対象は、DOM Element オブジェクトです。

unobserve メソッドで、監視対象を解除する

observer . unobserve (監視対象)

監視対象は、DOM Element オブジェクトです。

実際に動かす デモンストレーション


デモページへ移動


判定を取るタイミング(コールバックが処理を行うタイミング)は、option の threshold で変更できます。

0.0 ~ 1.0 までの閾値で設定することが出来ます。
threshold には、複数の値を設定できます。つまり、0.0 0.5 1.0 と設定した場合

といった具合に、3回のコールバックを発生させるタイミングを設定できます。

  1. threshold : 0
    ちょっとでも重なっている状態であれば true
  2. threshold : 1
    お互いが完全に重なり合った状態で true

threshold を 1 に設定した場合は、もし root 要素よりも大きい entry 要素だと、入りきらないためコールバックが発生しません。

当然、要素の display プロパティが none の場合は、監視の対象になりません。



♫ もどる ♫


うさみちゃんとクロラ様

Usamichan
Cafe