Docs
Scroll Area
Scroll Area
Augments native scroll functionality for custom, cross-browser styling.
<script lang="ts">
import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
import { Separator } from "$lib/components/ui/separator/index.js";
const tags = Array.from({ length: 50 }).map(
(_, i, a) => `v1.2.0-beta.${a.length - i}`
);
</script>
<ScrollArea class="h-72 w-48 rounded-md border">
<div class="p-4">
<h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
{#each tags as tag}
<div class="text-sm">
{tag}
</div>
<Separator class="my-2" />
{/each}
</div>
</ScrollArea>
<script lang="ts">
import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
import { Separator } from "$lib/components/ui/separator/index.js";
const tags = Array.from({ length: 50 }).map(
(_, i, a) => `v1.2.0-beta.${a.length - i}`
);
</script>
<ScrollArea class="h-72 w-48 rounded-md border">
<div class="p-4">
<h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
{#each tags as tag}
<div class="text-sm">
{tag}
</div>
<Separator class="my-2" />
{/each}
</div>
</ScrollArea>
Installation
npx shadcn-svelte@next add scroll-area
Install bits-ui:
npm i bits-ui -D
Copy and paste the component source files linked at the top of this page into your project.
Usage
<script lang="ts">
import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
</script>
<ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
Jokester began sneaking into the castle in the middle of the night and
leaving jokes all over the place: under the king's pillow, in his soup, even
in the royal toilet. The king was furious, but he couldn't seem to stop
Jokester. And then, one day, the people of the kingdom discovered that the
jokes left by Jokester were so funny that they couldn't help but laugh. And
once they started laughing, they couldn't stop.
</ScrollArea>
Examples
Horizontal Scrolling
Set the orientation prop to "horizontal" to enable horizontal scrolling.
<script lang="ts">
import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
type Artwork = {
artist: string;
art: string;
};
const works: Artwork[] = [
{
artist: "Ornella Binni",
art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
},
{
artist: "Tom Byrom",
art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80"
},
{
artist: "Vladimir Malyavko",
art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80"
}
];
</script>
<ScrollArea
class="w-96 whitespace-nowrap rounded-md border"
orientation="horizontal"
>
<div class="flex w-max space-x-4 p-4">
{#each works as artwork (artwork.artist)}
<figure class="shrink-0">
<div class="overflow-hidden rounded-md">
<img
src={artwork.art}
alt={`Photo by ${artwork.artist}`}
class="aspect-[3/4] h-fit w-fit object-cover"
width={300}
height={400}
/>
</div>
<figcaption class="text-muted-foreground pt-2 text-xs">
Photo by
<span class="text-foreground font-semibold">
{artwork.artist}
</span>
</figcaption>
</figure>
{/each}
</div>
</ScrollArea>
<script lang="ts">
import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
type Artwork = {
artist: string;
art: string;
};
const works: Artwork[] = [
{
artist: "Ornella Binni",
art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
},
{
artist: "Tom Byrom",
art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80"
},
{
artist: "Vladimir Malyavko",
art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80"
}
];
</script>
<ScrollArea
class="w-96 whitespace-nowrap rounded-md border"
orientation="horizontal"
>
<div class="flex w-max space-x-4 p-4">
{#each works as artwork (artwork.artist)}
<figure class="shrink-0">
<div class="overflow-hidden rounded-md">
<img
src={artwork.art}
alt={`Photo by ${artwork.artist}`}
class="aspect-[3/4] h-fit w-fit object-cover"
width={300}
height={400}
/>
</div>
<figcaption class="text-muted-foreground pt-2 text-xs">
Photo by
<span class="text-foreground font-semibold">
{artwork.artist}
</span>
</figcaption>
</figure>
{/each}
</div>
</ScrollArea>
Horizontal and Vertical Scrolling
Set the orientation prop to "both" to enable both horizontal and vertical scrolling.
<script lang="ts">
import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
</script>
<ScrollArea
class="h-[200px] w-[200px] rounded-md border p-4"
orientation="both"
>
<div class="w-[400px]">
Jokester began sneaking into the castle in the middle of the night and
leaving jokes all over the place: under the king's pillow, in his soup, even
in the royal toilet. The king was furious, but he couldn't seem to stop
Jokester. And then, one day, the people of the kingdom discovered that the
jokes left by Jokester were so funny that they couldn't help but laugh. And
once they started laughing, they couldn't stop.
</div>
</ScrollArea>
<script lang="ts">
import { ScrollArea } from "$lib/components/ui/scroll-area/index.js";
</script>
<ScrollArea
class="h-[200px] w-[350px] rounded-md border p-4"
orientation="both"
>
<div class="w-[400px]">
Jokester began sneaking into the castle in the middle of the night and
leaving jokes all over the place: under the king's pillow, in his soup, even
in the royal toilet. The king was furious, but he couldn't seem to stop
Jokester. And then, one day, the people of the kingdom discovered that the
jokes left by Jokester were so funny that they couldn't help but laugh. And
once they started laughing, they couldn't stop.
</div>
</ScrollArea>
On This Page