ScrollBox

Viewport clipping and virtualized scrolling.

ScrollBox

ScrollBox clips its children to the viewport and enables vertical or horizontal scrolling. It is ideal for long logs or lists. You can scroll with the mouse wheel or via keyboard shortcuts.

<scrollbox height={10} border>
  <text content={longLogOutput()} />
</scrollbox>

When the content is larger than the viewport, ScrollBox can maintain separate vertical and horizontal offsets. This is especially helpful for long lines (logs, tables, diffs) where horizontal scrolling is needed.

Attach a ScrollBar component to provide visual feedback for the current viewport:

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

In imperative code, ScrollBox is typically used as a container renderable: add children over time, and optionally focus it to route wheel and key events.

// Pseudocode-style example
scrollBox.focus()

for (let i = 0; i < 100; i += 1) {
  const row = new BoxRenderable(renderer, { padding: 1, marginBottom: 1 })
  row.add(new TextRenderable(renderer, { content: `Row ${i}` }))
  scrollBox.add(row)
}

Props

Prop	Type	Notes
`id`	`string`	Needed if you attach a `ScrollBar` via `targetId`.
`focused`	`boolean`	Routes wheel/keyboard interactions to the scrollbox.
`height`	`number`	Typical: fixed viewport height (logs, code view).
`border`	`boolean`	Convenient for “pane” visuals.

Recipes

Recipe: log viewer pane. Put a long Text or Markdown node inside a ScrollBox and attach a ScrollBar for feedback.

<box flexDirection="row" height={18}>
  <scrollbox id="logs" flexGrow={1} border focused>
    <text content={logs()} />
  </scrollbox>
  <scrollbar targetId="logs" />
</box>