Revision 1113069 of Intersection Observer API

<div>
<p>{{ SeeCompatTable() }}</p>

<p class="summary">The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's {{Glossary("viewport")}}.</p>
</div>

<h2 id="Intersection_observer_concepts_and_usage">Intersection observer concepts and usage</h2>

<p>The Intersection Observer API allows you to configure a callback that is called whenever one item, called a target, intersects either the device viewport or a specified element called, for the purpose of this API, the root element. Create the intersection observer by calling its constructor and passing it a reference to the callback function.</p>

<pre class="brush: js">
var options = {
&nbsp;&nbsp; &nbsp;root: document.querySelector('#scrollArea'),&nbsp;
&nbsp;&nbsp; &nbsp;rootMargin: '0px',&nbsp;
&nbsp;&nbsp; &nbsp;threshold: 1.0
}
var callback = function(entries, observer) {&nbsp;
&nbsp;&nbsp; &nbsp;/* Content excerpted, show below */&nbsp;
};
var observer = new IntersectionObserver(callback, options);</pre>

<p>A threshold of 1.0 means that when&nbsp;100 percent of <code>target</code> is visible within the&nbsp;<code>root </code>element, the callback is invoked.</p>

<p>Once you have the observer, give it a target.</p>

<pre class="brush: js">
var target = document.querySelector('#listItem');
observer.observe(target);
</pre>

<p>Whenever the target meets the threshold specified for the IntersectionObserver, the callback is invoked.</p>

<pre class="brush: js">
var callback = function(entries, observer) {&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;entries.forEach(entry =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entry.time; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // a DOMHightResTimeStamp indicating when the intersection occurred.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entry.rootBounds; &nbsp; &nbsp; &nbsp; &nbsp; // a DOMRectReadOnly for the intersection observer's root.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entry.boundingClientRect; // a&nbsp;DOMRectReadOnly&nbsp;for&nbsp;the intersection observer's target.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entry.intersectionRect; &nbsp; // a DOMRectReadOnly for the visible portion of the intersection observer's target.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entry.intersectionRatio; &nbsp;// the number for the ratio of the&nbsp;intersectionRect&nbsp;to the&nbsp;boundingClientRect.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entry.target; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // the Element whose intersection with the intersection root changed.
&nbsp;&nbsp;&nbsp;&nbsp;});
};
</pre>

<h2 id="Interfaces">Interfaces</h2>

<dl>
 <dt>{{domxref("IntersectionObserver")}}</dt>
 <dd>Provides a way to&nbsp;<span style="line-height:1.5">asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's {{Glossary('viewport')}}. The ancestor or viewport is referred to as the root.</span></dd>
 <dt>{{domxref("IntersectionObserverEntry")}}</dt>
 <dd>Provides information about the intersection of a particular target with the observers root element at a particular time. Instances of this interface cannot be created, but a list of them is returned by {{domxref("IntersectionObserver.takeRecords", "IntersectionObserver.takeRecords()")}}.</dd>
</dl>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('IntersectionObserver')}}</td>
   <td>{{Spec2('IntersectionObserver')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility">Browser Compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>
    <p>{{CompatChrome(51.0)}}</p>
   </td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(51.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(51.0)}}</td>
  </tr>
 </tbody>
</table>
</div>