ScrollArea
Scrolling region with edge fades indicating overflow, styled scrollbars, and keyboard scrolling.
Component behavior
ScrollArea renders a scrolling region with edge fades and configurable scrollbars. The viewport enters the tab order while content overflows. min-height: 0 allows the region to shrink inside flex layouts.
- Height-constrained content regions such as panels, menus, or logs.
- Horizontal strips of cards or filters.
- Regions that must stay pinned to the newest content as it arrives.
VirtualList: large row counts require virtualization.
PanelBody scroll: a Panel body requires overflow scrolling without additional controls.
Props
ScrollArea extends HTMLAttributes<HTMLDivElement>. Everything not listed here lands on the scrolling viewport, so onScroll, aria-label and a ref all reach the element that actually scrolls.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | ScrollAreaOrientation | "vertical" | "vertical" | "horizontal" | "both". |
scrollbar | ScrollAreaScrollbar | "thin" | "auto" (platform) | "thin" (tinted on hover) | "hidden". |
fade | boolean | true | Fades whichever edge has content past it. |
fadeColor | string | — | Fade background color. Defaults to the page background. Match this to the containing surface. |
maxH | CSSProperties['maxHeight'] | — | Shorthand for a capped, scrolling region. |
stickToBottom | boolean | — | Keeps the view pinned to the end as content arrives. Scrolling away releases the pin. |
Examples
Vertical
Edge fades indicate hidden content above or below the viewport. The viewport is keyboard focusable only while content overflows; arrow keys scroll it.
Horizontal
Pinned to the end
stickToBottom follows content as it is appended (a log tail, a transcript) and releases the moment the reader scrolls up. Scrolling back to the bottom takes the pin up again.
<ScrollArea maxH={280} stickToBottom fadeColor="var(--m-color-bg-deep)">
{lines.map((line) => (
<LogRow key={line.id} line={line} />
))}
</ScrollArea>Scrollbars
thin is the default scrollbar mode. It displays the scrollbar on hover or focus within the region. hidden hides it while retaining wheel, trackpad, and keyboard scrolling. auto uses the styled platform scrollbar.
import { ScrollArea } from "@solarius/onset";
import type { ScrollAreaOrientation, ScrollAreaScrollbar } from "@solarius/onset";
<ScrollArea maxH={240} fadeColor="var(--m-color-surface-low)">
<List>…</List>
</ScrollArea>
<ScrollArea orientation="horizontal" scrollbar="hidden">
<FilterChips />
</ScrollArea>InboxPanel and TransferList are built on it; see Surface & Panel for the panel body variant.