Scroll Area

Scrollable region with Orbital-themed native scrollbars.

Styled native scrolling — not virtualization. Uses overflow: auto and CSS scrollbar-* / ::-webkit-scrollbar rules so thumbs track design tokens (light/dark). Use in shell Layout columns, Navigation bodies, and custom panels.

  • Fixed-height regions with overflowing content (sidebar nav, main columns, panels)
  • Any scrollport that should match Orbital theme rather than default OS chrome colors
  • Horizontal overflow when horizontal=true (wide toolbars, carousels)
  • Set style height (or width for horizontal) on ScrollArea so the scrollport has bounds.
  • Put overflowing content inside the default slot.
  • Set show_scrollbar=false to hide scrollbar chrome while keeping wheel/touch scroll.
  • Adjust size for scrollbar thumb/track thickness in pixels (default 8) — not viewport size.
Default vertical scroll

Vertical scrollport with themed thumbs on a bounded demo frame.

Content is taller than the 280px scrollport.

Scroll with wheel, trackpad, or drag the themed scrollbar thumb.

Line 0 — extra content to ensure vertical overflow.

Line 1 — extra content to ensure vertical overflow.

Line 2 — extra content to ensure vertical overflow.

Line 3 — extra content to ensure vertical overflow.

Line 4 — extra content to ensure vertical overflow.

Line 5 — extra content to ensure vertical overflow.

Line 6 — extra content to ensure vertical overflow.

Line 7 — extra content to ensure vertical overflow.

Line 8 — extra content to ensure vertical overflow.

Line 9 — extra content to ensure vertical overflow.

Line 10 — extra content to ensure vertical overflow.

Line 11 — extra content to ensure vertical overflow.

Scrollbar visibility

Side-by-side: themed thumbs (default) versus hidden chrome with wheel scroll only.

Thumbs visible

Visible scrollbar line 0

Visible scrollbar line 1

Visible scrollbar line 2

Visible scrollbar line 3

Visible scrollbar line 4

Visible scrollbar line 5

Visible scrollbar line 6

Visible scrollbar line 7

Visible scrollbar line 8

Visible scrollbar line 9

Thumbs hidden

Hidden scrollbar line 0

Hidden scrollbar line 1

Hidden scrollbar line 2

Hidden scrollbar line 3

Hidden scrollbar line 4

Hidden scrollbar line 5

Hidden scrollbar line 6

Hidden scrollbar line 7

Hidden scrollbar line 8

Hidden scrollbar line 9

Horizontal scroll

Bounded width with wide inner content; horizontal thumb uses the same theme tokens.

Wide content that scrolls horizontally — drag or shift+wheel to move along the row.