Scroll Area

Scroll area components are used as layout containers, meaning that the content you place inside will follow the content’s own rules. Unlike other components, this one is specifically designed to function as a layout.

It is also necessary to use a container to define its dimensions, since it will take up 100% of the size of the element it is placed in.

src/components/Features.astro

---
// Import
import ScrollArea from "../components/ScrollArea.astro";
---
(...)
<div class="Type your container dimensions here">
  <ScrollArea>
    (...)
    <!-- Your content need to be here and the container will do all the job. -->
    (...)
  </ScrollArea>
</div>
(...)

---

1. Vertical Scroll

Vertical scroll is ideal for long lists that you don’t want to take up space or affect the aesthetics of the rest of your page.

Preview

Hello

From

Scroll

Vertical

Code

src/components/VerticalScroll.astro

   ---
   // 0 Instructions in this component
   ---
   <div class="h-full w-full overflow-y-scroll scrollbar-thin scrollbar-thumb-white/30 scrollbar-track-transparent scrollbar-thumb-rounded-lg scrollbar-track-rounded-lg border border-white/30 p-6 not-content">
       <slot/>
   </div>

---

2. Horizontal Scroll

Usually used as a way to contain multiple images in a reduced space.

Preview

Hello

From

Scroll

Horizontal

Code

src/components/HorizontalScroll.astro

   ---
   // 0 Instructions in this component
   ---
   <div class="h-full w-full flex flex-row overflow-x-scroll scrollbar-thin scrollbar-thumb-white/30 scrollbar-track-transparent scrollbar-thumb-rounded-lg scrollbar-track-rounded-lg border border-white/30 p-6 not-content">
     <slot/>
   </div>