IsInViewport

Track if an element is visible within the current viewport.

IsInViewport uses the useIntersectionObserver utility to track if an element is visible within the current viewport.

It accepts an element or getter that returns an element and an optional options object that aligns with the useIntersectionObserver utility options.

Demo

Target node

Scroll down to observe the behavior

Target node is out of viewport

Usage

		<script lang="ts">
	import { IsInViewport } from "runed";
 
	let targetNode = $state<HTMLElement>()!;
	const inViewport = new IsInViewport(() => targetNode);
</script>
 
<p bind:this={targetNode}>Target node</p>
 
<p>Target node in viewport: {inViewport.current}</p>

Type Definition

		import { type UseIntersectionObserverOptions } from "runed";
export type IsInViewportOptions = UseIntersectionObserverOptions;
 
export declare class IsInViewport {
	constructor(node: MaybeGetter<HTMLElement | null | undefined>, options?: IsInViewportOptions);
	get current(): boolean;
}