observeIntersection
Category Observers
Runs a callback when the targets are visible on the screen.
Demo
Scroll down...
i'm the target element
Element outside the viewport
Usage
Type definitions
import { type ConfigurableWindow } from '../../__internal__/configurable.js';
import type { Getter } from '../../__internal__/types.js';
export interface ObserveIntersectionOptions extends ConfigurableWindow {
/**
* Whether to automatically cleanup the observer or not.
*
* If set to `true`, it must run in the component initialization lifecycle.
* @default true
*/
autoCleanup?: boolean;
/**
* Whether to start the IntersectionObserver on creation or not.
* @default true
*/
immediate?: boolean;
/**
* The element or document whose bounds are used as the bounding box when testing for intersection.
* @default document
*/
root?: HTMLElement | Getter<HTMLElement> | Document;
/**
* A string which specifies a set of offsets to add to the root's bounding box when calculating intersections.
* @default '0px'
*/
rootMargin?: string;
/**
* Either a single number or an array of numbers between 0.0 and 1.
* @default 0
*/
threshold?: number | number[];
}
export interface ObserveIntersectionReturn {
/** Whether the {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API | `Intersection Observer API`} is supported or not. */
readonly isSupported: boolean;
/** Whether the function is currently observing the targets or not. */
readonly isActive: boolean;
/** Resumes the observer. */
resume: () => void;
/** Pauses the observer. It can also be used to cleanup the observer. */
pause: () => void;
/**
* Cleans up the observer.
* @note Alias for `pause`.
*/
cleanup: () => void;
}
/**
* Runs a callback when the target is visible on the screen.
* @param target The target to observe.
* @param callback The callback to run when the targets are visible on screen.
* @param options Additional options to customize the behavior.
* @see https://svelte-librarian.github.io/sv-use/docs/core/observers/observe-intersection
*/
export declare function observeIntersection(target: Getter<HTMLElement | null | undefined>, callback: IntersectionObserverCallback, options: ObserveIntersectionOptions): ObserveIntersectionReturn;
/**
* Runs a callback when the targets are visible on the screen.
* @param targets The targets to observe.
* @param callback The callback to run when the targets are visible on screen.
* @param options Additional options to customize the behavior.
* @see https://svelte-librarian.github.io/sv-use/docs/core/observers/observe-intersection
*/
export declare function observeIntersection(targets: Array<Getter<HTMLElement | null | undefined>>, callback: IntersectionObserverCallback, options: ObserveIntersectionOptions): ObserveIntersectionReturn;