IntersectionObserver: IntersectionObserver() コンストラクター

callback

対象要素の見える割合が閾値をまたいだ場合に呼び出される関数です。 このコールバックは以下の 2 つの引数を取ります。

entries

IntersectionObserverEntry オブジェクトの配列で、それぞれの要素は、閾値をまたいだ要素を表します。これは可視状態が、その閾値で指定されたパーセント値よりも高くなった場合も低くなった場合も含まれます。

observer

コールバックが呼び出される IntersectionObserver です。

options 省略可

省略可能で、オブザーバーをカスタマイズするためのオブジェクトです。 もし options に何も指定されていない場合、オブザーバーはルートとして文書のビューポートを使用し、マージンなし、閾値 0% （つまり、 1px でも変化があればコールバックが呼び出される）を使用します。 次のオプションから任意の組み合わせを利用できます。

root

Element または Document オブジェクトで、対象の祖先要素です。これらの外接矩形がビューポートとみなされます。 root の可視領域に見えていない部分は、可視状態であるとはみなされません。

rootMargin

文字列で、交差状態を計算するときに、ルートの外接ボックスに適用されるオフセットのセットを指定し、適用されるオフセットの矩形で、計算に使用するルートの矩形を縮小または拡大させます。 構文は概ね CSS の margin プロパティのものと同じです。 margin のしくみと構文について詳しくは交差ルートとルートマージンを参照してください。 既定値は "0px 0px 0px 0px" です。

threshold

単一の数値か、または 0.0 と 1.0 の間の数値の配列で指定し、監視対象の外接ボックスの総面積に対する交差領域の比率を指定します。 0.0 の値に設定すると、 1px でも交差領域に入ったらその対象要素は可視状態になったとみなされます。 1.0 は対象要素全体が可視状態であることを意味します。 閾値の扱い方については、閾値でより詳しく説明されています。 既定値は 0.0 の閾値です。

新しい IntersectionObserver で、指定された root 内における対象要素の可視状態が、指定した可視状態の threshold のいずれかを通過することを監視するために使用することができます。 その observe() メソッドを呼び出すと、指定された対象要素の可視状態の変化を監視し始めることができます。

SyntaxError DOMException

指定した rootMargin が不正です。

RangeError

threshold の値のうち 1 つ以上の値が 0.0 から 1.0 の範囲に当てはまりません。

この例では、監視されている要素の可視範囲が 10% を越える毎に myObserverCallback を呼び出すような新しい交差オブザーバーを生成します。

let observer = new IntersectionObserver(myObserverCallback, { threshold: 0.1 });