useScroll

v0.0.14testeddemo

Reactive scroll position and state for an element or the window, with arrived-edge detection (RTL-aware), scroll directions, an isScrolling flag, optional throttling, and a measure() method for manual re-sync.

Source Tests

Example

const { x, y, isScrolling, arrivedState, measure } = useScroll(el);

Demo

Loading demo…

Signature

export function useScroll(
  target: UseScrollTarget,
  options: UseScrollOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`target`	`UseScrollTarget`	—	The scroll container (can be reactive)
`options`?	`UseScrollOptions`	`{}`	Options

Returns

UseScrollReturnReactive position, scroll state, arrived edges, directions, and measure

Property	Type	Default	Description
`x`	`Ref<number>`	—	—
`y`	`Ref<number>`	—	—
`isScrolling`	`Ref<boolean>`	—	—
`arrivedState`	`UseScrollEdgeState`	—	—
`directions`	`UseScrollEdgeState`	—	—
`measure`	`() => void`	—	Recompute `x`, `y`, `arrivedState`, and `directions` from the current DOM state. Call after a programmatic layout change that did not emit a scroll event.