Scroll Area

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Fit long content, such as tables, diffs, or logs, into limited space. Scrollbars appear while scrolling or when the pointer comes within 24px of their edge. They stay operable during drag and keyboard scrolling. Given a height, or a flex or grid track, the region fills it and scrolls; without one it takes its content's height. Each edge that hides content fades, the top and bottom too, so a cut-off list reads as more to come. A page's own scroller, such as an AppShell's content, sets fade="none".

Don't split the page into needless nested scroll regions. Use a single scroll region instead. Give a label to any region whose content scrolls out of view.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

ScrollArea(label) → Root / Viewport + Scrollbar / Thumb / Corner

Keyboard and accessibility

Tab focuses the region. Arrow keys and Page Up or Page Down scroll it. Wheel and touch scrolling keep working. label gives the region its accessible name.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { ScrollArea } from '@surflane/ui'

<ScrollArea label='Build logs' orientation='both' style={{ maxHeight: 240 }}>
  <table>...</table>
</ScrollArea>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens