Web/API/IntersectionObserver

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.

Constructor

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

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.

Methods

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

Examples

var intersectionObserver = new IntersectionObserver(function(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'));

Specifications

Specification	Status	Comment
Intersection ObserverThe definition of 'IntersectionObserver' in that specification.	Working Draft

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`IntersectionObserver` Experimental'	Chrome Full support 51	Edge Full support 15	Firefox Full support 55 Full support 55 No support 53 — 55 Disabled' Disabled' From version 53 until version 55 (exclusive): this feature is behind the `dom.IntersectionObserver.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 38	Safari Full support 12.1	WebView Android Full support 51	Chrome Android Full support 51	Firefox Android ?	Opera Android Full support 41	Safari iOS Full support 12.2	Samsung Internet Android Full support 5.0
`IntersectionObserver()` constructor Experimental'	Chrome Full support 51	Edge Full support 15	Firefox Full support 55 Full support 55 No support 53 — 55 Disabled' Disabled' From version 53 until version 55 (exclusive): this feature is behind the `dom.IntersectionObserver.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 38	Safari Full support 12.1	WebView Android Full support 51	Chrome Android Full support 51	Firefox Android ?	Opera Android ?	Safari iOS Full support 12.2	Samsung Internet Android Full support 5.0
`disconnect` Experimental'	Chrome Full support 51	Edge Full support 15 Notes' Full support 15 Notes' Notes' Available since Windows Insider Preview Build 14986	Firefox Full support 55 Full support 55 No support 53 — 55 Disabled' Disabled' From version 53 until version 55 (exclusive): this feature is behind the `dom.IntersectionObserver.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support Yes	Safari ?	WebView Android Full support 51	Chrome Android Full support 51	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Full support 5.0
`observe` Experimental'	Chrome Full support 51	Edge Full support 15	Firefox Full support 55 Full support 55 No support 53 — 55 Disabled' Disabled' From version 53 until version 55 (exclusive): this feature is behind the `dom.IntersectionObserver.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support Yes	Safari Full support 12.1	WebView Android Full support 51	Chrome Android Full support 51	Firefox Android ?	Opera Android ?	Safari iOS Full support 12.2	Samsung Internet Android Full support 5.0
`root` Experimental'	Chrome Full support 51	Edge Full support 15	Firefox Full support 55 Full support 55 No support 53 — 55 Disabled' Disabled' From version 53 until version 55 (exclusive): this feature is behind the `dom.IntersectionObserver.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support Yes	Safari Full support 12.1	WebView Android Full support 51	Chrome Android Full support 51	Firefox Android ?	Opera Android ?	Safari iOS Full support 12.2	Samsung Internet Android Full support 5.0
`rootMargin` Experimental'	Chrome Full support 51	Edge Full support 15	Firefox Full support 55 Full support 55 No support 53 — 55 Disabled' Disabled' From version 53 until version 55 (exclusive): this feature is behind the `dom.IntersectionObserver.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support Yes	Safari Full support 12.1 Notes' Full support 12.1 Notes' Notes' `rootMargin` does not work with `<iframe>`s.	WebView Android Full support 51	Chrome Android Full support 51	Firefox Android ?	Opera Android ?	Safari iOS Full support 12.2 Notes' Full support 12.2 Notes' Notes' `rootMargin` does not work with `<iframe>`s.	Samsung Internet Android Full support 5.0
`takeRecords` Experimental'	Chrome Full support 51	Edge Full support 15 Notes' Full support 15 Notes' Notes' Available since Windows Insider Preview Build 14986	Firefox Full support 55 Full support 55 No support 53 — 55 Disabled' Disabled' From version 53 until version 55 (exclusive): this feature is behind the `dom.IntersectionObserver.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support Yes	Safari ?	WebView Android Full support 51	Chrome Android Full support 51	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Full support 5.0
`thresholds` Experimental'	Chrome Full support 51	Edge Full support 15	Firefox Full support 55 Full support 55 No support 53 — 55 Disabled' Disabled' From version 53 until version 55 (exclusive): this feature is behind the `dom.IntersectionObserver.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support Yes	Safari Full support 12.1	WebView Android Full support 51	Chrome Android Full support 51	Firefox Android ?	Opera Android ?	Safari iOS Full support 12.2	Samsung Internet Android Full support 5.0
`unobserve` Experimental'	Chrome Full support 51	Edge Full support 15 Notes' Full support 15 Notes' Notes' Available since Windows Insider Preview Build 14986	Firefox Full support 55 Full support 55 No support 53 — 55 Disabled' Disabled' From version 53 until version 55 (exclusive): this feature is behind the `dom.IntersectionObserver.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support Yes	Safari Full support 12.1	WebView Android Full support 51	Chrome Android Full support 51	Firefox Android ?	Opera Android ?	Safari iOS Full support 12.2	Samsung Internet Android Full support 5.0

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
See implementation notes.': See implementation notes.
User must explicitly enable this feature.': User must explicitly enable this feature.