A lightweight, dependency-free Svelte 5 component for tracking scroll progress of an element within the viewport.
npm install svelte-scroll-tracker
--scroll-progress), making it extremely flexible and easy to apply to any CSS animation, effect, or logic you want. You have full control over how to use the progress value in your styles or scripts.
requestAnimationFrame, ensuring updates are efficient and do not overload the browser during rapid scrolling.
sh
npm install svelte-scroll-tracker
`
Usage
$3
`svelte
startThreshold={0}
endThreshold={0.5}
debug={false}
>
Scroll me!
Progress: {Math.round(100 * $css('--scroll-progress'))}%
`
- The component sets a CSS custom property --scroll-progress (from 0 to 1) on its root element as you scroll.
- You can customize startThreshold, endThreshold, and debug via props.
- No external dependencies; works out of the box with Svelte 5.
$3
You can also use the progress value programmatically via the children snippet slot:
`svelte
{#snippet children(progress)}
static content
{#if progress > 0.5}
dynamic content
{/if}
{/snippet}
``