ScrollBar

Visual indicator for scroll position.

ScrollBar

ScrollBar displays a track and a movable thumb that reflects the visible region of an associated ScrollBox. Provide the targetId of the ScrollBox to attach it.

<box flexDirection="row">
  <scrollbox id="content" width={70} height={18} />
  <scrollbar targetId="content" />
</box>

You can place scrollbars vertically or horizontally and adjust their appearance via theme configuration.

For large, high‑frequency content (like streaming logs), prefer keeping the ScrollBar visible and implement an “auto-follow” mode: when the user scrolls up manually, stop following; when they scroll back to the bottom, resume following. This avoids fighting the user while still being great for tails.

Props

Prop	Type	Notes
`targetId`	`string`	ID of the ScrollBox to track. Must match exactly.
`orientation`	`vertical \| horizontal`	Choose vertical for lists/logs, horizontal for long lines/tables.