elementVisibilityStore

Tracks the visibility of an element within the viewport.

Demo

Target Element (scroll down)

Scroll the window and watch element status in the bottom right corner.

Info on the right bottom corner

Element is outside the viewport

Usage

<script lang="ts">
import { elementVisibilityStore } from "svelte-legos";

let ref: HTMLElement | null = null;

$: ({ isVisible } = elementVisibilityStore(ref));

// use reactive boolean property as $isVisible
</script>