Scroll Area
Augments native scroll functionality for custom, cross-browser styling.
Loading preview…
1<script lang="ts">
2 import { Separator } from '../separator/index.js';
3 import { ScrollArea } from './index.js';
4
5 const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
6</script>
7
8<ScrollArea class="h-72 w-48 rounded-md border">
9 <div class="p-4">
10 <h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
11 {#each tags as tag (tag)}
12 <div class="text-sm">
13 {tag}
14 </div>
15 <Separator class="my-2" />
16 {/each}
17 </div>
18</ScrollArea>
19Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/scroll-area/scroll-area.svelte
- ~/components/scroll-area/scroll-area-scrollbar.svelte
- ~/components/scroll-area/index.ts
Usage
Use scroll-area for styled scrolling regions. Set orientation to vertical (default), horizontal, or both.
1<script lang="ts">
2 import { Separator } from '~/components/separator';
3 import { ScrollArea } from '~/components/scroll-area';
4
5 const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
6</script>
7
8<ScrollArea class="h-72 w-48 rounded-md border">
9 <div class="p-4">
10 <h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
11 {#each tags as tag (tag)}
12 <div class="text-sm">
13 {tag}
14 </div>
15 <Separator class="my-2" />
16 {/each}
17 </div>
18</ScrollArea>