ScrollArea macrolite

A scrolling region of bounded height or width.

Built from: Box
Children: many

Preview

Loading the renderer…

direction

maxHeight

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "ScrollArea",
          "direction": "vertical",
          "maxHeight": 240,
          "children": [
            "c0-r1",
            "c0-r2",
            "c0-r3",
            "c0-r4",
            "c0-r5",
            "c0-r6",
            "c0-r7",
            "c0-r8"
          ],
          "style": {
            "height": 160
          }
        },
        {
          "id": "c0-r1",
          "component": "Row",
          "title": "Issue 1",
          "meta": "1h",
          "pressable": true
        },
        {
          "id": "c0-r2",
          "component": "Row",
          "title": "Issue 2",
          "meta": "2h",
          "pressable": true
        },
        {
          "id": "c0-r3",
          "component": "Row",
          "title": "Issue 3",
          "meta": "3h",
          "pressable": true
        },
        {
          "id": "c0-r4",
          "component": "Row",
          "title": "Issue 4",
          "meta": "4h",
          "pressable": true
        },
        {
          "id": "c0-r5",
          "component": "Row",
          "title": "Issue 5",
          "meta": "5h",
          "pressable": true
        },
        {
          "id": "c0-r6",
          "component": "Row",
          "title": "Issue 6",
          "meta": "6h",
          "pressable": true
        },
        {
          "id": "c0-r7",
          "component": "Row",
          "title": "Issue 7",
          "meta": "7h",
          "pressable": true
        },
        {
          "id": "c0-r8",
          "component": "Row",
          "title": "Issue 8",
          "meta": "8h",
          "pressable": true
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

ScrollArea rendered by the React renderer on Web — **Web** React

ScrollArea rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

ScrollArea rendered by the Compose renderer on Android — **Android** Compose

ScrollArea rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-scroll-area, painted by each native renderer.

Variants

direction · vertical

direction · horizontal

direction · both

Props

Prop	Type	Default	Description
`direction`	`vertical \| horizontal \| both`	`"vertical"`	Which axis scrolls.
`maxHeight`	`number`	–	Px it scrolls within; omit to fill the parent.
`style`	`style`	–	Extra Box styles merged over the region's own.

Events and slots

No events, no slots. Children: many.

Accessibility

Role: region
Semantics: region (scrollable, focusable when it overflows)

Keys	Action
–	Arrow keys, PageUp/PageDown, Home/End scroll while focused

Theming

Recipe parts: ScrollArea/root
Keyed by: :hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme