useIntersectionObserver API

A composable for detecting when elements enter or leave the viewport using the Intersection Observer API with automatic cleanup.

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)