MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The IntersectionObserver interface of the 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 viewport. The ancestor element or viewport is referred to as the root.

When an IntersectionObserver is created, it's configured fo watch for given ratios of visibility within the root. The configuration cannot be changed once the IntersectionObserver is created, so a given observer object is only useful for watching for specific changes in degree of visibility; however, you can watch multiple target elements with the same observer.

Constructor

IntersectionObserver.IntersectionObserver()
Creates a new IntersectionObserver object which will execute a specified callback function when it detects that a target element's visibility has crossed one or more thresholds.

Properties

IntersectionObserver.root Read only
A specific ancestor of the target element being observed. If no value was passed to the constructor or this is null, the top-level document's viewport is used.
IntersectionObserver.rootMargin Read only
An offset rectangle applied to the root's bounding box when calculating intersections, effectively shrinking or growing the root for calculation purposes. The valuer returned by this property may not be the same as the one specified when calling the constructor as it may be changed to match internal requirements. Each offset can be expressed in pixels (px) or as a percentage (%). The default is "0px 0px 0px 0px".
IntersectionObserver.thresholds Read only
A list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target. Notifications for a target are generated when any of the thresholds are crossed for that target. If no value was passed to the constructor, 0 is used.

Methods

IntersectionObserver.disconnect()
Stops the IntersectionObserver object from observing any target.
IntersectionObserver.observe()
Tells the IntersectionObserver a target element to observe.
IntersectionObserver.takeRecords()
Returns an array of IntersectionObserverEntry objects for all observed targets and stops observing all of them.
IntersectionObserver.unobserve()
Tells the IntersectionObserver to stop observing a particular target element.

Examples

var intersectionObserver = new IntersectionObserver(function(entries) {
  // If intersectionRatio is 0, the target is out of view
  // and we do not need to do anything.
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log('Loaded new items');
});
// start observing
intersectionObserver.observe(document.querySelector('.scrollerFooter'));

Specifications

Specification Status Comment
Intersection Observer
The definition of 'IntersectionObserver' in that specification.
Editor's Draft Initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 51.0 (Yes)[1] 55 (55)[2] No support ? ?
Feature Android Android Webview Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support 51.0 ? 55.0 (55)[2] No support No support ? ? 51.0

[1] This feature is available since the Windows Insider Preview Build 14986.

[2] This feature has been implemented since Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) behind the preference dom.IntersectionObserver.enabled, which was false by default. Enabled by default beginning in Firefox 55. See bug 1243846.

Document Tags and Contributors

 Contributors to this page: Sheppy, erikadoyle, jpmedley, bunnybooboo, Sebastianz, yisibl, paul.irish
 Last updated by: Sheppy,