IntersectionObserver

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2019⁩.

* Some parts of this feature may have varying levels of support.

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

When anIntersectionObserver is created, it's configured to watch for given ratios of visibility within the root. The configuration cannot be changed once theIntersectionObserver 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(): Creates a newIntersectionObserver object which will execute a specified callback function when it detects that a target element's visibility has crossed one or more thresholds.

Instance properties

IntersectionObserver.delayRead onlyExperimental: An integer indicating the minimum delay between notifications from this observer.
IntersectionObserver.rootRead only: TheElement orDocument whose bounds are used as the bounding box when testing for intersection. If noroot value was passed to the constructor or its value isnull, the top-level document's viewport is used.
IntersectionObserver.rootMarginRead only: An offset rectangle applied to the root'sbounding box when calculating intersections, effectively shrinking or growing the root for calculation purposes. The value 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 percentages (%). The default is "0px 0px 0px 0px".
IntersectionObserver.scrollMarginRead only: An offset rectangle applied to eachscroll container on the path from intersection root to target, effectively shrinking or growing the clip rectangles used to calculate intersections.The value returned by this property may not be the same as the one specified when calling the constructor.
IntersectionObserver.thresholdsRead 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.
IntersectionObserver.trackVisibilityRead onlyExperimental: A boolean indicating whether thisIntersectionObserver is checking that the target does not have compromised visibility.

Instance methods

IntersectionObserver.disconnect(): Stops theIntersectionObserver object from observing any target.
IntersectionObserver.observe(): Tells theIntersectionObserver a target element to observe.
IntersectionObserver.takeRecords(): Returns an array ofIntersectionObserverEntry objects for all observed targets.
IntersectionObserver.unobserve(): Tells theIntersectionObserver to stop observing a particular target element.

Examples

const intersectionObserver = new IntersectionObserver((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 observingintersectionObserver.observe(document.querySelector(".scrollerFooter"));