Scroll Area
A container with custom scrollbars for overflow content.
<script lang="ts">
import { ScrollArea } from "coss-svelte";
const tags = Array.from({ length: 50 }, (_, index) => `v1.0.0-alpha.${index}`);
</script>
<ScrollArea class="h-64 w-64 rounded-lg border">
<div class="px-4 py-2">
<h4 class="mb-2 font-medium text-sm">Tags</h4>
<div class="flex flex-col gap-1">
{#each tags as tag}
<div class="text-sm">{tag}</div>
{/each}
</div>
</div>
</ScrollArea>
Installation
Install the component package, shared coss-svelte theme, and Bits UI peer.
npm install coss-svelte @coss-svelte/theme bits-uiUsage
Import the Svelte component exports directly from the package.
import { ScrollArea, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "coss-svelte";Anatomy
- ScrollArea
- ScrollAreaCorner
- ScrollAreaScrollbar
- ScrollAreaThumb
- ScrollAreaViewport
API Reference
ScrollArea
A container with custom scrollbars for overflow content.
children : Snippet<[]>bind:ref : HTMLElement | nullInherits from Bits UI ScrollArea.Root.
ScrollAreaCorner
Renders the corner where horizontal and vertical scrollbars meet.
children : Snippet<[]>bind:ref : HTMLElement | nullInherits from Bits UI ScrollArea.Corner.
ScrollAreaScrollbar
Renders a scrollbar for the scroll area.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | Orientation | "vertical" | Layout direction for the component. |
children : Snippet<[]>bind:ref : HTMLElement | nullInherits from Bits UI ScrollArea.Scrollbar.
ScrollAreaThumb
Renders the draggable or moving indicator.
children : Snippet<[]>bind:ref : HTMLElement | nullInherits from Bits UI ScrollArea.Thumb.
ScrollAreaViewport
Wraps the scrollable viewport for the parent component.
children : Snippet<[]>bind:ref : HTMLElement | nullInherits from Bits UI ScrollArea.Viewport.
Implementation Details
- Status
- Stable
- Foundation
- bits
- Category
- Layout & Navigation
- Particles
- 5