useScrollspy

Tracks which target element is currently in the viewport during scroll.

Scroll callbacks are collapsed into one animation frame, and the active target is recomputed whenever the target list, the probe line, the size of the scroll container, or the viewport changes.

targets must be in document order: the probe line is located by bisecting their offsets, so a pass costs log n layout reads instead of one per target.

Exports

function useScrollspy(
  targets: MaybeRefOrGetter<HTMLElement[]>,
  options?: UseScrollspyOptions,
): UseScrollspyReturn

Types

interface UseScrollspyOptions {
  scrollTarget?: MaybeRefOrGetter<Window | HTMLElement | null>
  topOffset?: MaybeRefOrGetter<number>
}

interface UseScrollspyReturn {
  activeIndex: ShallowRef<number>
  activeEl: ShallowRef<HTMLElement | null>
  update: () => void
}

Params