{{SeeCompatTable}}{{APIRef("")}}
The IntersectionObserver
interface of the 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 {{Glossary('viewport')}}. The ancestor or viewport is referred to as the root.
Constructor
- {{domxref("IntersectionObserver.IntersectionObserver()")}}
- Creates a new
IntersectionObserver
object.
Properties
- {{domxref("IntersectionObserver.root")}} {{readonlyinline}}
- A specific ancestor of the {{domxref("element")}} being observed. If no value was passed to the constructor, the top-level document's viewport is used.
- {{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}
- An offset applied to the root's {{Glossary('bounding_box')}} when calculating intersections, effectively shrinking or growing the root for calculation purposes. This is not guaranteed to be identical to the value passed in the constructor. If no value was passed to the constructor, "0px 0px 0px 0px" is used. This property takes pixels ('px') or percentages ('%').
- {{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}
- 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
- {{domxref("IntersectionObserver.disconnect")}}
- Stops the IntersectionObserver object from observing any target.
- {{domxref("IntersectionObserver.observe")}}
- Tells the
IntersectionObserver
a target element to observe. - {{domxref("IntersectionObserver.takeRecords")}}
- Returns an array of {{domxref("IntersectionObserverEntry")}} objects for all observed targets and stops observing all of them.
- {{domxref("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 |
---|---|---|
{{SpecName('IntersectionObserver','#intersection-observer-private-slots','IntersectionObserver')}} | {{Spec2('IntersectionObserver')}} | Initial definition. |
Browser Compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support |
{{CompatChrome(51.0)}} |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatChrome(51.0)}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatChrome(51.0)}} |