This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The IntersectionObserver()
constructor creates and returns a new IntersectionObserver
object. The rootMargin
, if specified, is checked to ensure it's syntactically correct, the thresholds are checked to ensure that they're all in the range 0.0 and 1.0 inclusive, and the threshold list is sorted in ascending numeric order. if the threshold list is empty, it's set to the array [0.0].
var observer = new IntersectionObserver(callback[, options]);
callback
entries
IntersectionObserverEntry
objects, each representing one threshold which was crossed, either becoming more or less visible than the percentage specified by that threshold.observer
IntersectionObserver
for which the callback is being invoked.options
Optional
options
isn't specified, the observer uses the document's viewport as the root, with no margin, and a 0% threshold (meaning that even a one-pixel change is enough to trigger a callback). You can provide any combination of the following options: root
Element
object which is an ancestor of the intended target, whose bounding rectangle will be considered the viewport. Any part of the target not visible in the visible area of the root
is not considered visible.rootMargin
margin
property; see The root element and root margin in Intersection Observer API for more information on how the margin works and the syntax. The default is "0px 0px 0px 0px".threshold
A new IntersectionObserver
which can be used to watch for the visibility of a target element within the specified root
crossing through any of the specified visibility threshold
s. Call its observe()
method to begin watching for the visibility changes on a given target.
SyntaxError
rootMargin
is invalid.threshold
is outside the range 0.0 to 1.0.Specification | Status | Comment |
---|---|---|
Intersection Observer The definition of 'IntersectionObserver constructor' in that specification. | Working Draft | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 51 | 15 | 55
|
No | ? | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 51 | 51 | Yes | ? | ? | ? | 5.0 |
© 2005–2018 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/IntersectionObserver