useIntersectionObserver API

API reference for the useIntersectionObserver composable.

Explore these related pages for additional context and usage patterns.

Page	Category
useIntersectionObserver	System
useResizeObserver	System
useMutationObserver	System

Functions

useIntersectionObserver

(target: MaybeElementRef, callback: (entries: IntersectionObserverEntry[]) => void, options?: IntersectionObserverOptions) => UseIntersectionObserverReturn

A composable that uses the Intersection Observer API to detect when an element is visible in the viewport.

useElementIntersection

(target: MaybeElementRef, options?: IntersectionObserverOptions) => UseElementIntersectionReturn

A convenience composable that uses the Intersection Observer API to detect when an element is visible in the viewport.

Options

immediate

boolean | undefined

once

boolean | undefined

root

Element | null | undefined

rootMargin

string | undefined

threshold

number | number[] | undefined

Properties

isActive

Readonly<Ref<boolean, boolean>>

Whether the observer is currently active (created and observing)

isPaused

Readonly<Ref<boolean, boolean>>

Whether the observer is currently paused

isIntersecting

Readonly<Ref<boolean, boolean>>

Whether the target element is currently intersecting with the viewport

Methods

pause

() => void

Pause observation (disconnects observer but keeps it alive)

resume

() => void

Resume observation

stop

() => void

Stop observation and clean up (destroys observer)