ScrollArea

A scrollable container component that enables smooth vertical or horizontal scrolling for overflowing content, with full control over direction, layout, and custom styling.

pnpm dlx hybrid-astro-ui@latest scroll-area

npx hybrid-astro-ui@latest add scroll-area

yarn dlx hybrid-astro-ui@latest add scroll-area

bunx hybrid-astro-ui@latest add scroll-area

Vertical Scroll

Keep in mind that to enable vertical scrolling, the ScrollArea component must have a fixed height. This restricts the visible area, allowing any overflowing content to scroll vertically, as shown below:

---
import { ScrollArea } from "@/src/components/hybrid-astro-ui/scroll-area"
---

<ScrollArea direction="vertical" class="h-60 w-full">
    <div class="grid grid-cols-1 place-items-center p-3">
       { [1,2,3,4,5,6,7,8,9,10].map(i => 
        <span class="border-b py-1 w-[60%]  text-center">Item #{i}</span>
       ) }
    </div>
</ScrollArea>

Horizontal Scroll

For horizontal scrolling, you do not need to define a minimum width on the ScrollArea component. The scrolling behavior depends entirely on your layout and content—once the inner blocks exceed the available width, horizontal scrolling will activate automatically.

---
import { ScrollArea } from "@/src/components/hybrid-astro-ui/scroll-area"
---

<ScrollArea direction="horizontal" class="w-100">
    <div class="flex gap-3 p-3">
        {Array.from({ length: 20 }, (_, i) => (
        <span class="border-b py-1 min-w-[150px] text-center block">
                Item #{i}
        </span>
        ))}
    </div>
</ScrollArea>

Our Image Gallery

"Whispers of the Valley"— July 8, 2023

"Whispers of the Valley"— July 8, 2023

"Whispers of the Valley"— July 8, 2023

"Whispers of the Valley"— July 8, 2023

---
import  { Image } from "astro:assets"
import { ScrollArea } from "@/src/components/hybrid-astro-ui/scroll-area"
import landg_1 from "@/src/assets/land-1.png"
import landg_2 from "@/src/assets/land-2.png"
import landg_3 from "@/src/assets/land-3.png"

---

<div class="border">
    <p class="m-0! text-center text-2xl rounded-2xl font-semibold py-3">Our Image Gallery</p>
    <ScrollArea direction="horizontal" class="w-full px-2 pb-2">
        <div class="flex gap-3">
            {
                [landg_1,landg_2,landg_3,landg_2].map(image =>
                <div class="gap-2 min-w-100">
                    <Image  src={image} class="w-full m-0!" alt="example-image"/>
                    <div class="w-full">
                        <p class="text-center m-0! opacity-85 font-semibold" >
                            "Whispers of the Valley"
                            <span class="italic font-normal">— July 8, 2023</span>
                        </p>
                    </div>
                </div>
            )
            }
        </div>
    </ScrollArea>
</div>