ScrollArea

<ScrollArea height="10rem" aria-label="Changelog">
…
</ScrollArea>

Add

npx @ava-ui/apogee add scroll-area

No Apogee dependencies.

Usage

---
import ScrollArea from '@/components/apogee/ScrollArea/ScrollArea.astro'

<JsNote fallback="The box scrolls normally, stays in the Tab order and shows no fade.">
  Keeps the box in the Tab order only while its content overflows. With `fade`, sets `data-fade` on the box as it scrolls so the hidden edge fades.
</JsNote>
---
<ScrollArea height="20rem" aria-label="Members">
  <ul>…</ul>
</ScrollArea>

API

@composable. Any other native attribute passes through.

Variants

<ScrollArea direction="vertical" height="8rem">…</ScrollArea>
<ScrollArea direction="horizontal">…</ScrollArea>
<ScrollArea direction="both" height="8rem">…</ScrollArea>

Fade and scrollbar

Every scrollbar value, and fade:

<ScrollArea maxHeight="8rem" fade>…</ScrollArea>
<ScrollArea maxHeight="8rem" scrollbar="thin">…</ScrollArea>
<ScrollArea maxHeight="8rem" scrollbar="hidden">…</ScrollArea>
<ScrollArea maxHeight="8rem" scrollbar="hover">…</ScrollArea>

fade with direction="both" fades the top and bottom edges only.

Short content

When nothing overflows, the box leaves the Tab order (there is nothing to scroll); it rejoins as soon as its content grows past the height.

<ScrollArea maxHeight="8rem" aria-label="Two lines">…</ScrollArea>

Accessibility

• While its content overflows, the container has tabindex="0" so keyboard users can focus it and scroll with the arrow keys; it shows the focus ring. When nothing overflows it leaves the Tab order.
• Give it an aria-label (or aria-labelledby) when nothing nearby names the region.

Tokens

Layout primitive, so no content rules.