Scrollable

Usage

Overview

Scrollable wraps content that exceeds its container while preserving layout—chat feeds, inspector bodies, long settings forms. It standardizes scrollbar visibility and density (smallScrollbar) so nested panes in dispatch feel consistent across browsers. In @prepared911/ui, cap the frame with maxWidth and maxHeight from the Box size scale instead of wrapping the scroller in a Box only to set a max size.

When to use

Vertical overflow in fixed-height panels (drawers, split panes, modals).
Horizontal overflow for wide timelines or code viewers with deliberate sideways scroll.
Chat or log feeds that should mount at the bottom (scrollReverse patterns).

When not to use

Whole-page scrolling managed by the browser—avoid nested scroll unless the layout demands panes.
Lists of thousands of simple rows—consider Virtualized list.

Variants

Scrollbar visibility: auto, always, hidden per axis; smallScrollbar for dense tables and side panels.

Anatomy

Viewport clipping children; scrollbars per configuration; may interact with flex grow/shrink parents.

Content guidelines

No text inside Scrollable itself—children own copy; ensure padding tokens prevent content touching edges.

Behavior and states

Programmatic scroll (refs) for “jump to message” features must not fight user manual scroll without clear UX.
Nested scroll areas need distinct visual boundaries—users should always know which region scrolls.

Best practices

Do set explicit heights or flex constraints; unconstrained flex children may refuse to scroll.
Do use scrollReverse for feeds where newest items append at the bottom.
Don’t nest many independent scrollers in one small modal—simplify layout.
Don’t hide scrollbars on axes where content truly overflows unless an alternate pan gesture exists and is discoverable.

Accessibility

Keyboard scrollers and focusable children inside panels remain reachable; avoid overflow: hidden traps that strand focus.

Virtualized list for long feeds.
Drawer and Dialog for common scroll hosts.
Message for chat content inside scroll regions.

Portal / Accessibility

Scrollable / API and Development

On this page

Scrollable

Usage

Overview

When to use

Vertical overflow in fixed-height panels (drawers, split panes, modals).
Horizontal overflow for wide timelines or code viewers with deliberate sideways scroll.
Chat or log feeds that should mount at the bottom (scrollReverse patterns).

When not to use

Whole-page scrolling managed by the browser—avoid nested scroll unless the layout demands panes.
Lists of thousands of simple rows—consider Virtualized list.

Variants

Scrollbar visibility: auto, always, hidden per axis; smallScrollbar for dense tables and side panels.

Anatomy

Viewport clipping children; scrollbars per configuration; may interact with flex grow/shrink parents.

Content guidelines

No text inside Scrollable itself—children own copy; ensure padding tokens prevent content touching edges.

Behavior and states

Programmatic scroll (refs) for “jump to message” features must not fight user manual scroll without clear UX.
Nested scroll areas need distinct visual boundaries—users should always know which region scrolls.

Best practices

Do set explicit heights or flex constraints; unconstrained flex children may refuse to scroll.
Do use scrollReverse for feeds where newest items append at the bottom.
Don’t nest many independent scrollers in one small modal—simplify layout.
Don’t hide scrollbars on axes where content truly overflows unless an alternate pan gesture exists and is discoverable.

Accessibility

Keyboard scrollers and focusable children inside panels remain reachable; avoid overflow: hidden traps that strand focus.

Virtualized list for long feeds.
Drawer and Dialog for common scroll hosts.
Message for chat content inside scroll regions.

Portal / Accessibility

Scrollable / API and Development

On this page