This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
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 viewport. The ancestor or viewport is referred to as the root.
IntersectionObserver.IntersectionObserver()
IntersectionObserver
object.IntersectionObserver.root
Read only
element
being observed. If no value was passed to the constructor, the top-level document's viewport is used.IntersectionObserver.rootMargin
Read only
IntersectionObserver.thresholds
Read only
IntersectionObserver.disconnect
IntersectionObserver.observe
IntersectionObserver
a target element to observe.IntersectionObserver.takeRecords
IntersectionObserverEntry
objects for all observed targets and stops observing all of them.IntersectionObserver.unobserve
IntersectionObserver
to stop observing a particular target element.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'));
Specification | Status | Comment |
---|---|---|
Intersection Observer The definition of 'IntersectionObserver' in that specification. | Editor's Draft | Initial definition. |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 51.0 | No support[1] | No support[2] | No support | ? | ? |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | No support | 51.0 | No support[2] | No support | No support | ? | ? | 51.0 |
[1] This feature is available since the Windows Insider Preview Build 14986.
[2] This feature is implemented since Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) behind the preference dom.IntersectionObserver.enabled
, defaulting to false. See bug 1243846.
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver