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.
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]);
- A function which is called when the percentage of the target element is visible crosses a threshold. The callback receives as input two parameters:
- An optional object which customizes the observer. If
optionsisn'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:
Elementobject 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
rootis not considered visible.
- A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections, effectively shrinking or growing the root for calculation purposes. The syntax is approximately the same as that for the CSS
marginproperty; 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".
- Either a single number or an array of numbers between 0.0 and 1.0, specifying a ratio of intersection area to total bounding box area for the observed target. A value of 0.0 means that even a single visible pixel counts as the target being visible. 1.0 means that the entire target element is visible. See "Thresholds" in Intersection Observer API for a more in-depth description of how thresholds are used. The default is a threshold of 0.0.
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
thresholds. Call its
observe() method to begin watching for the visibility changes on a given target.
- The specified
- One or more of the values in
thresholdis outside the range 0.0 to 1.0.
The definition of 'IntersectionObserver constructor' in that specification.
|Editor's Draft||Initial definition.|
|Feature||Chrome||Edge||Firefox (Gecko)||Internet Explorer||Opera||Safari (WebKit)|
|Basic support||51.0||No support||55 (55)||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||55.0 (55)||No support||No support||?||?||51.0|
 This feature is available since the Windows Insider Preview Build 14986.
 This feature has been implemented since Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) behind the preference
dom.IntersectionObserver.enabled, which was
false by default. Enabled by default beginning in Firefox 55. See bug 1243846.