---
title: IntersectionObserver
slug: Web/API/IntersectionObserver
tags:
  - API
  - Experimental
  - Intersection Observer API
  - IntersectionObserver
  - Reference
  - インターフェイス
  - リファレンス
  - 実験的
translation_of: Web/API/IntersectionObserver
---
<div>{{APIRef("Intersection Observer API")}}</div>

<p><a href="/ja/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> の <code><strong>IntersectionObserver</strong></code> インターフェイスは、<span class="seoSummary">対象の要素と祖先要素または文書の最上位の{{Glossary('viewport', 'ビューポート')}}との交差状態の変化を非同期に監視する方法を提供します。</span>祖先要素またはビューポートがルートとして参照されます。</p>

<p><code>IntersectionObserver</code> が生成されると、ルート内での可視部分の比率を監視するように構築されます。構成はいったん <code>IntersectionObserver</code> が生成されると変更できませんので、与えられた監視オブジェクトは可視性の観点による特定の変化を監視する場合にのみ有用です。しかしながら、同じオブザーバーで複数の対象要素を監視することができます。</p>

<h2 id="Constructor" name="Constructor">コンストラクター</h2>

<dl>
 <dt>{{domxref("IntersectionObserver.IntersectionObserver()")}}</dt>
 <dd>対象の要素の可視性が1つまたは複数の閾値を通過したことを検出したときに、指定されたコールバック関数を実行する新しい <code>IntersectionObserver</code> オブジェクトを生成します。</dd>
</dl>

<h2 id="Properties" name="Properties">プロパティ</h2>

<dl>
 <dt>{{domxref("IntersectionObserver.root")}} {{readonlyinline}}</dt>
 <dd>指定された、監視対象となる {{domxref("element")}} の祖先です。コンストラクターに値が渡されなかった場合はこの値が <code>null</code> となり、最上位の文書のビューポートが使用されます。</dd>
 <dt>{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}</dt>
 <dd>交差状態を計算するときに root の {{Glossary('bounding box', 'バウンディングボックス')}} に適用されるオフセットの矩形で、計算のために root を効果的に縮小または拡大させます。このプロパティから返る値は、内部的な要件に合わせて変化するので、コンストラクターを呼び出したときに指定したものと同じにならないことがあります。それぞれのオフセットはピクセル数 (<code>px</code>) またはパーセント値 (<code>%</code>) で表すことができます。既定値は "0px 0px 0px 0px" です。</dd>
 <dt>{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}</dt>
 <dd>交差領域と監視対象のバウンディングボックス領域との比の閾値を昇順に並べたリストです。対象の通知は、対象においていずれかの閾値を通過した場合に生成されます。コンストラクターで値が渡されなければ、 0 が使用されます。</dd>
</dl>

<h2 id="Methods" name="Methods">メソッド</h2>

<dl>
 <dt>{{domxref("IntersectionObserver.disconnect()")}}</dt>
 <dd><code>IntersectionObserver</code> オブジェクトが対象を監視することを停止します。</dd>
 <dt>{{domxref("IntersectionObserver.observe()")}}</dt>
 <dd><code>IntersectionObserver</code> が対象の要素を監視するよう命じます。</dd>
 <dt>{{domxref("IntersectionObserver.takeRecords()")}}</dt>
 <dd>監視対象すべての {{domxref("IntersectionObserverEntry")}} オブジェクトの配列を返し、すべての監視を停止します。</dd>
 <dt>{{domxref("IntersectionObserver.unobserve()")}}</dt>
 <dd><code>IntersectionObserver</code> が特定の要素の監視を停止するよう命じます。</dd>
</dl>

<h2 id="Examples" name="Examples">例</h2>

<pre class="brush: js">var intersectionObserver = new IntersectionObserver(function(entries) {
  // intersectionRatio が 0 の場合、対象がビューの外にあるので、
  // 何かをする必要はありません。
  if (entries[0].intersectionRatio &lt;= 0) return;

  loadItems(10);
  console.log('Loaded new items');
});
// 監視を開始
intersectionObserver.observe(document.querySelector('.scrollerFooter'));</pre>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('IntersectionObserver')}}</td>
   <td>{{Spec2('IntersectionObserver')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>

<p>{{Compat("api.IntersectionObserver")}}</p>