IntersectionObserver.IntersectionObserver()

IntersectionObserver() コンストラクタは、新しい IntersectionObserver オブジェクトを生成します。 rootMargin は、指定されていた場合は構文が正しいかが確認され、閾値は、0.0 から 1.0 の間であるか確認され、閾値のリストは昇順に並べ替えられます。

構文

var observer = new IntersectionObserver(callback[, options]);

パラメーター

callback
対象の要素の比率が、閾値と交差して表示されたときに実行します。コールバックは 2 つの引数を受け取ります。
entries
IntersectionObserverEntry オブジェクトの配列で、それぞれ、その閾値によって指定された割合より多くあるいは少なく表示されているかに関わらず、 1 つの交差した閾値を表します。
observer
コールバックが呼び出される IntersectionObserver
options Optional
オブザーバをカスタマイズするためのオプションオブジェクトです。 もし options に何も指定されていない場合、オブザーバはルートとして、余白の無い、閾値 0% のドキュメントビューポートを使用します(つまり、1px でも閾値に入ればコールバックが実行されます)。次のオプションから任意の組み合わせを利用できます。
root
Element または Document オブジェクトは、対象の祖先要素であり、これらの矩形はビューポートとみなされます。対象の要素が root の表示領域においてどの部分も表示されていなければ、見えていないことになります。
rootMargin
交差状態を計算するときに root の bounding_box に適用されるオフセットのセットを指定する文字列で、計算のために root を効果的に縮小または拡大させます。構文は概ね CSS の margin プロパティのものと同じです。margin のしくみと構文について詳しくは The root element and root margin in Intersection Observer API を御覧ください。デフォルト値は "0px 0px 0px 0px" です。
threshold
1 つの数字か、または 0.0 と 1.0 の間の数字の配列で指定し、監視対象の矩形の総面積に対する交差領域の比率を指定します。 0.0 に指定された場合、1px でも交差領域に入ったらその対象要素は表示されたとみなされます。threshold がどのように使われるかについては、 Thresholds in Intersection Observer API でより深く説明されています。 デフォルトの閾値は 0.0 です。

戻り値

新しい IntersectionObserver は、対象要素が、指定された root 内で threshold の可視閾値を通過して表示されたかどうかの可視性を監視するために使用できます。対象要素の可視性の変更を監視し始めるには、 observe() メソッドを呼び出します。

例外

SyntaxError
指定した rootMargin は無効な値です。
RangeError
threshold の値のうち 1 つまたは 1 つ以上の値が 0.0 から 1.0 の範囲に当てはまりません。

この例では、監視されている要素の可視範囲が 10% 以上になったときに毎回 myObserverCallback を呼び出すような新しい intersection observer を生成しています。

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

仕様

仕様書 策定状況 コメント
Intersection Observer
IntersectionObserver constructor の定義
草案 初期定義

ブラウザー実装状況

BCD tables only load in the browser