Intersection Observer API

Intersection observer concepts and usage

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.

var options = {
    root: document.querySelector('#scrollArea'), 
    rootMargin: '0px', 
    threshold: 1.0
}
var callback = function(entries, observer) { 
    /* Content excerpted, show below */ 
};
var observer = new IntersectionObserver(callback, options);

A threshold of 1.0 means that when 100 percent of target is visible within the root element, the callback is invoked.

Once you have the observer, give it a target.

var target = document.querySelector('#listItem');
observer.observe(target);

Whenever the target meets the threshold specified for the IntersectionObserver, the callback is invoked.

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

Interfaces

IntersectionObserver

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.

IntersectionObserverEntry

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 IntersectionObserver.takeRecords().

Specifications

Browser Compatibility

See also

• Intersection Observer polyfill