zidanehooks/useNearViewport
import { … } from 'zidane-ui'ui/src/hooks/useNearViewport.ts
Functions#
scrollRootOfFunction#
The nearest scrolling ancestor. Observers must use it as their root: with the window as root, a scroll container clips its content before the margin applies, so a margin never reaches past the container's edges and "near" would only mean "already on screen". Cached by parent, so rows of one list resolve it once.
A container marked data-scroll-root is found by a DOM walk alone. Its
unmarked ancestors are read with getComputedStyle, which in a mount effect
restyles everything mounting with the element: a conversation opening with
a few code blocks paid for its whole style recalculation in that frame. A
scroller nested inside a marked one is a root only if it is marked too.
function scrollRootOf(el: Element): Element | nullParameters
| Name | Type | Description |
|---|---|---|
| el | Element | The element to start from. |
Returns
Element | nullThe nearest ancestor with overflow-y of auto or scroll, or null when the window
scrolls.
useNearViewportFunction#
Reports whether an element has come within margin of the viewport. It turns true once
and stays true, so it suits lazy work such as highlighting code that scrolls into reach.
Without IntersectionObserver it is true at once.
function useNearViewport(ref: RefObject<Element | null>, margin?: string): booleanParameters
| Name | Type | Default | Description |
|---|---|---|---|
| ref | RefObject<Element | null> | Ref to the element to watch. | |
| margin? | string | '600px 0px' | How far outside the viewport counts as near, as a CSS margin string. Defaults to
|
Returns
booleanWhether the element has been near the viewport.