IntersectionObserver

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 or viewport is referred to as the root.

Constructor

IntersectionObserver.IntersectionObserver()

Creates a new IntersectionObserver object.

Properties

IntersectionObserver.root Read only

A specific ancestor of the element being observed. If no value was passed to the constructor, the top-level document's viewport is used.

IntersectionObserver.rootMargin Read only

An offset applied to the root's bounding_box when calculating intersections, effectively shrinking or growing the root for calculation purposes. This is not guaranteed to be identical to the value passed in the constructor. If no value was passed to the constructor, "0px 0px 0px 0px" is used. This property takes pixels ('px') or percentages ('%').

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

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

[2] This feature is implemented since Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) behind the preference dom.IntersectionObserver.enabled, defaulting to false. See bug 1243846.