Scroll Area

Installation

pnpm dlx @mielui/svelte add scroll-area

npx @mielui/svelte add scroll-area

yarn dlx @mielui/svelte add scroll-area

bunx @mielui/svelte add scroll-area

Usage

Put the scrolling content in children and give the area a height or maximum height with class; without one it grows to fit and never scrolls. class styles the outer shell; other attributes and bind:element go to the scroll viewport.

<script lang="ts">
    import { ScrollArea } from '@mielui/svelte/components/scroll-area';
</script>

<ScrollArea class="h-48 w-64">
    <div>Your content here</div>
</ScrollArea>

The viewport is not a tab stop by itself. When its content has no focusable controls, add tabindex={0}, role="region", and an aria-label so keyboard users can scroll it.

A vertical scroll area fades its overflowing edges into the surface behind it and blurs the content passing under them. The cues update as content is inserted, removed, or resized. Pass showCues={false} to drop them, or blur={false} to keep the fade without a backdrop filter. The scrollbar thumb stays hidden until the area is hovered, focused, or scrolled.

While its content overflows, a scroll area keeps the wheel to itself, so reaching the end does not scroll the page behind it. When everything fits, scrolling passes through to the page.