Intersection
Utility used to detect when your elements are clipped by the browser.
Examples
Percentage Visible 0
Usage
Detect when your elements are clipped by the browser using an intersection.
APIs
IIntersectionProps
observationElement
HTMLElement | string | (() => HTMLElement | null)
If the caller wants to observe a single static element within the intersection
that is available when the intersection mounts, it can supply an observationElement.
onIntersect
(entries: IntersectionObserverEntry[]) => void
onIntersect is called in two cases and denotes a change in the rootElements
visible viewport.
1) When the rootElement is scrolled onIntersect is called with a empty
array of entries. No intersections are calculated.
2) When the underlying IntersectionObserver fires the intersection events.
These event describe the changes in visibility of elements being observed
through the IntersectionContext.
rootElement
HTMLElement | string | (() => HTMLElement | null)
The parent element that contains the elements being observed and has its
onScroll events forwarded.
rootMargin
number
An additional amount number of pixels that should be considered within the
viewport of the rootElement. This is used to enlarge the visibility range
making intersection occur when elements are still outside the visible view.
threshold
number[]
Threshold define the point at which the change is important. By default the
threshold are set to a 1% change in visibility. If the caller wants to know
about specific points only they can supply a custom set of thresholds.