useIntersectionObserver

v0.0.14testeddemo

Detect when an element enters or leaves the viewport via IntersectionObserver. Accepts a single target, an array of targets, or a ref/getter resolving to either, plus reactive rootMargin and threshold.

Source Tests

Example

useIntersectionObserver(el, ([{ isIntersecting }]) => {
  visible.value = isIntersecting;
});

Demo

Loading demo…

Signature

export function useIntersectionObserver(
  target: MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter<MaybeElement[]>,
  callback: IntersectionObserverCallback,
  options: UseIntersectionObserverOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`target`	`MaybeComputedElementRef \| MaybeComputedElementRef[] \| MaybeRefOrGetter<MaybeElement[]>`	—	Element(s) to observe
`callback`	`IntersectionObserverCallback`	—	Invoked with the observer entries
`options`?	`UseIntersectionObserverOptions`	`{}`	Options

Returns

UseIntersectionObserverReturnObserver controls

Property	Type	Default	Description
`isSupported`	`Readonly<Ref<boolean>>`	—	—
`isActive`	`Readonly<Ref<boolean>>`	—	—
`pause`	`() => void`	—	—
`resume`	`() => void`	—	—
`stop`	`() => void`	—	—