IntersectionObserver

package js.html

Available on js

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.

Documentation IntersectionObserver by Mozilla Contributors, licensed under CC-BY-SA 2.5.

See also:

• https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver

Constructor

new(intersectionCallback:(Array<IntersectionObserverEntry>, IntersectionObserver) ‑> Void, ?options:Null<IntersectionObserverInit>)

Throws:

null	DOMError

Variables

read onlyroot:Element

A specific ancestor of the target element being observed. If no value was passed to the constructor or this is null, the top-level document's viewport is used.

read onlyrootMargin:String

An offset rectangle applied to the root's bounding box when calculating intersections, effectively shrinking or growing the root for calculation purposes. The value returned by this property may not be the same as the one specified when calling the constructor as it may be changed to match internal requirements. Each offset can be expressed in pixels (px) or as a percentage (%). The default is "0px 0px 0px 0px".

read onlythresholds:Array<Float>

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

disconnect():Void

Stops the IntersectionObserver object from observing any target.

observe(target:Element):Void

Tells the IntersectionObserver a target element to observe.

takeRecords():Array<IntersectionObserverEntry>

Returns an array of IntersectionObserverEntry objects for all observed targets.

unobserve(target:Element):Void

Tells the IntersectionObserver to stop observing a particular target element.