Intersection Observer API

The Intersection Observer API allows you to configure a callback that is called when either of these circumstances occur: A traget element intersects either the device's viewport or a specified element. That specified element is called the root element or root for the purposes of the Intersection Observer API. The first time the observer is initially asked to watch a target element. Typically, you'll want to watch for intersection changes with regard to the target element's closest scrollable ancestor, or, if the target element is not a descendant of a scrollable element, the device's viewport. The API works the same way, in all cases, whether you're using the viewport or some other element as the root. The degree of intersection between the target element and its root is the intersection ratio. This is a representation of the percentage of the target element which is visible as a value between 0.0 and 1.0 . Creating an Intersection Observer create the intersection observer by calling its constructor and passing it a callback function to be run whenever a threshold is crossed in one direction or the other: ` const options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0, }; const observer = new IntersectionObserver(callback, options); ` A threshold of 1.0 means that when 100% of the target is visible within the element specified by the root option, the callback is invoked. Intersection Observer options The option object passed into the IntersectionObserver() constructor let you control the circumstances under which the observer's callback is invoked. it has the following fields: root the element that is used as the viewport for checking visibility of the target. MUST be the ancestor of the target. Defaults to the browser viewport if not specified or if null. rootMargin Margin around the root. A string of one to four values similar to the CSS margin property, e.g., "5px 10px 15px 25px" (top, right, bottom, left). The values can ONLY be percentages or absolute lengths. Threshold Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. If you only want to detect when visibility passes the 50% mark, you can use a value of 0.5 . If you want the callback to run every time visibility passes another 25%, you would specify the array [0, 0.25, 0.5, 0.75, 1]. The default is 0 (meaning as soon as even on pixel is visible, the callbach will be run). A value of 1.0 means that the treshold isn't considered passed until every pixel is visible. Be aware that your callback is executed on the main thread. It should operate as quickly as possible; if anything time-consuming needs to be done, use Window.requestIdleCallback() .

Jun 7, 2025 - 14:20

The Intersection Observer API allows you to configure a callback that is called when either of these circumstances occur:

A traget element intersects either the device's viewport or a specified element. That specified element is called the root element or root for the purposes of the Intersection Observer API.
The first time the observer is initially asked to watch a target element.

Typically, you'll want to watch for intersection changes with regard to the target element's closest scrollable ancestor, or, if the target element is not a descendant of a scrollable element, the device's viewport.

The API works the same way, in all cases, whether you're using the viewport or some other element as the root.

The degree of intersection between the target element and its root is the intersection ratio. This is a representation of the percentage of the target element which is visible as a value between 0.0 and 1.0 .

Creating an Intersection Observer

create the intersection observer by calling its constructor and passing it a callback function to be run whenever a threshold is crossed in one direction or the other:

`
const options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0,
};

const observer = new IntersectionObserver(callback, options);
`
A threshold of 1.0 means that when 100% of the target is visible within the element specified by the root option, the callback is invoked.

Intersection Observer options

The option object passed into the IntersectionObserver() constructor let you control the circumstances under which the observer's callback is invoked. it has the following fields:

root
the element that is used as the viewport for checking visibility of the target. MUST be the ancestor of the target. Defaults to the browser viewport if not specified or if null.

rootMargin
Margin around the root. A string of one to four values similar to the CSS margin property, e.g., "5px 10px 15px 25px" (top, right, bottom, left). The values can ONLY be percentages or absolute lengths.

Threshold
Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. If you only want to detect when visibility passes the 50% mark, you can use a value of 0.5 . If you want the callback to run every time visibility passes another 25%, you would specify the array [0, 0.25, 0.5, 0.75, 1]. The default is 0 (meaning as soon as even on pixel is visible, the callbach will be run). A value of 1.0 means that the treshold isn't considered passed until every pixel is visible.

Be aware that your callback is executed on the main thread. It should operate as quickly as possible; if anything time-consuming needs to be done, use Window.requestIdleCallback() .