{{ SeeCompatTable() }}
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")}}.
Intersection observer concepts and usage
The Intersection Observer API allows you to configure a callback that is called whenever one item, called a target, intersects either the device viewport or a specified element called, for the purpose of this API, the root element. Create the intersection observer by calling its constructor and passing it a reference to the callback function.
var options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } var callback = function(entries, observer) { /* Content excerpted, show below */ }; var observer = new IntersectionObserver(callback, options);
A threshold of 1.0 means that when 100 percent of target
is visible within scrollArea
(our root), callback is invoked.
Once you have the observer, give it a target.
var target = document.querySelector('#listItem'); observer.observe(target);
Whenever the target meets the threshold specified for the IntersectionObserver, the callback is invoked.
var callback = function(entries, observer) { entries.forEach(entry => { entry.time; // a DOMHightResTimeStamp indicating when the intersection occurred. entry.rootBounds; // a DOMRectReadOnly for the intersection observer's root. entry.boundingClientRect; // a DOMRectReadOnly for the intersection observer's target. entry.intersectionRect; // a DOMRectReadOnly for the visible portion of the intersection observer's target. entry.intersectionRatio; // the number for the ratio of the intersectionRect to the boundingClientRect. entry.target; // the Element whose intersection with the intersection root changed. }); };
Interfaces
- {{domxref("IntersectionObserver")}}
- 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.
- {{domxref("IntersectionObserverEntry")}}
- Provides information about the intersection of a particular target with the observers root element at a particular time. Instances of this interface cannot be created, but a list of them is returned by {{domxref("IntersectionObserver.takeRecords", "IntersectionObserver.takeRecords()")}}.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('IntersectionObserver')}} | {{Spec2('IntersectionObserver')}} | Initial definition. |
Browser Compatibility
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)}} |