/Web APIs


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.



Creates a new IntersectionObserver 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.root Read only

The Element or Document whose bounds are used as the bounding box when testing for intersection. If no root value was passed to the constructor or its value is null, the top-level document's viewport is used.

IntersectionObserver.rootMargin Read only

An offset rectangle applied to the root's bounding 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 as a percentage (%). The default is "0px 0px 0px 0px".

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.

Instance methods


Stops the IntersectionObserver object from observing any target.


Tells the IntersectionObserver a target element to observe.


Returns an array of IntersectionObserverEntry objects for all observed targets.


Tells the IntersectionObserver to stop observing a particular target element.


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;

  console.log("Loaded new items");
// start observing


Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
IntersectionObserver 51 15
55Before version 96, the constructor throws a DOMException if the options.rootMargin option is passed an empty string (see bug 1738791).
No 38 12.1 51 51 55 41 12.2 5.0
IntersectionObserver 51 15 55 No 38 12.1 51 51 55 41 12.2 5.0
disconnect 51
15Available since Windows Insider Preview Build 14986.
55 No 38 12.1 51 51 55 41 12.2 5.0
observe 51 15 55 No 38 12.1 51 51 55 41 12.2 5.0
root 51 15 55 No 38 12.1 51 51 55 41 12.2 5.0
rootMargin 51 15 55 No 38
12.1rootMargin does not work with <iframe>s.
51 51 55 41
12.2rootMargin does not work with <iframe>s.
takeRecords 51
15Available since Windows Insider Preview Build 14986.
55 No 38 12.1 51 51 55 41 12.2 5.0
thresholds 52 15 55 No 39 12.1 52 52 55 41 12.2 6.0
unobserve 51
15Available since Windows Insider Preview Build 14986.
55 No 38 12.1 51 51 55 41 12.2 5.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.