Widely available Supported across all major browsers. Safe to use in production.

Intersection observer

The IntersectionObserver interface of 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 to 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.

Observers and Performance

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
IntersectionObserver
51
15
55
12.1
51
12.2
delay
Experimental

The delay read-only property of the IntersectionObserver interface indicates the minimum delay between notifications from this observer.
74
79
74
disconnect

The disconnect() method of the IntersectionObserver interface stops the observer watching all of its target elements for visibility changes.
51
15
55
12.1
51
12.2
IntersectionObserver

The IntersectionObserver() constructor creates and returns a new IntersectionObserver object.
51
15
55
12.1
51
12.2
IntersectionObserver (options root parameter Document)

`options.root` parameter can be a `Document`
81
81
76
14
81
14
observe

The observe() method of the IntersectionObserver interface adds an element to the set of target elements being watched by the IntersectionObserver. One observer has one set of thresholds and one root, but can watch multiple target elements for visibility changes in keeping with those.
51
15
55
12.1
51
12.2
root

The root read-only property of the IntersectionObserver interface identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target.
51
15
55
12.1
51
12.2
rootMargin

The rootMargin read-only property of the IntersectionObserver interface is a string with syntax similar to that of the CSS margin property.
51
15
55
12.1
51
12.2
scrollMargin

The scrollMargin read-only property of the IntersectionObserver interface adds a margin to all nested scroll container within the root element, including the root element if it is a scroll container.
120
120
141
26
120
26
takeRecords

The takeRecords() method of the IntersectionObserver interface returns an array of IntersectionObserverEntry objects, one for each targeted element which has experienced an intersection change since the last time the intersections were checked, either explicitly through a call to this method or implicitly by an automatic call to the observer's callback.
51
15
55
12.1
51
12.2
thresholds

The thresholds read-only property of the IntersectionObserver interface returns the list of intersection thresholds that was specified when the observer was instantiated with IntersectionObserver.IntersectionObserver.
52
15
55
12.1
52
12.2
trackVisibility
Experimental

The trackVisibility read-only property of the IntersectionObserver interface indicates whether the observer is tracking target visibility in addition to element intersections.
74
79
74
unobserve

The unobserve() method of the IntersectionObserver interface instructs the IntersectionObserver to stop observing the specified target element.
51
15
55
12.1
51
12.2
IntersectionObserverEntry

The IntersectionObserverEntry interface of the Intersection Observer API describes the intersection between the target element and its root container at a specific moment of transition.
51
15
55
12.1
51
12.2
boundingClientRect

The boundingClientRect read-only property of the IntersectionObserverEntry interface returns a DOMRectReadOnly which in essence describes a rectangle describing the smallest rectangle that contains the entire target element.
51
15
55
12.1
51
12.2
IntersectionObserverEntry
Experimental

The IntersectionObserverEntry() constructor creates and returns a new IntersectionObserverEntry object.
15
12.1
12.2
intersectionRatio

The intersectionRatio read-only property of the IntersectionObserverEntry interface tells you how much of the target element is currently visible within the root's intersection ratio, as a value between 0.0 and 1.0.
51
15
55
12.1
51
12.2
intersectionRect

The intersectionRect read-only property of the IntersectionObserverEntry interface is a DOMRectReadOnly object which describes the smallest rectangle that contains the entire portion of the target element which is currently visible within the intersection root.
51
15
55
12.1
51
12.2
isIntersecting

The isIntersecting read-only property of the IntersectionObserverEntry interface is a Boolean value which is true if the target element intersects with the intersection observer's root.
58
16
55
12.1
58
12.2
isVisible
Experimental
74
79
74
rootBounds

The rootBounds read-only property of the IntersectionObserverEntry interface is a DOMRectReadOnly corresponding to the IntersectionObserverEntry.target's root intersection rectangle, offset by the IntersectionObserver.rootMargin if one is specified.
51
15
55
12.1
51
12.2
target

The target read-only property of the IntersectionObserverEntry interface indicates which targeted Element has changed its amount of intersection with the intersection root.
51
15
55
12.1
51
12.2
time

The time read-only property of the IntersectionObserverEntry interface is a DOMHighResTimeStamp that indicates the time at which the intersection change occurred relative to the time at which the document was created.
51
15
55
12.1
51
12.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Available since Windows Insider Preview Build 14986.
Notes 1 item(s)
Implementation note
  • Before version 96, the constructor throws a `DOMException` if the `options.rootMargin` option is passed an empty string (see bug 1738791).
Notes 1 item(s)
Implementation note
  • `rootMargin` does not work with `<iframe>`s.
Notes 1 item(s)
Implementation note
  • `rootMargin` does not work with `<iframe>`s.
Notes 1 item(s)
Implementation note
  • Available since Windows Insider Preview Build 14986.
Notes 1 item(s)
Implementation note
  • Available since Windows Insider Preview Build 14986.
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (79)

Syntax

JAVASCRIPT 
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 observing
intersectionObserver.observe(document.querySelector(".scrollerFooter"));

Use cases

  • Using Intersection observer

    The IntersectionObserver interface of 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.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links