Scroll Area
A styled, keyboard-navigable scroll container with custom scrollbars, optional auto-hide, scroll shadows, smooth scrolling and a programmatic scroll API.
Row 1 — scrollable content
Row 2 — scrollable content
Row 3 — scrollable content
Row 4 — scrollable content
Row 5 — scrollable content
Row 6 — scrollable content
Row 7 — scrollable content
Row 8 — scrollable content
Row 9 — scrollable content
Row 10 — scrollable content
API
All inputs and configuration options for zyra-scroll-area.
| Prop | Type | Default | Description |
|---|---|---|---|
maxHeight | string | '300px' | CSS max-height of the viewport |
orientation | 'vertical' | 'horizontal' | 'both' | 'vertical' | Which axes scroll |
smoothScroll | boolean | false | scroll-behavior: smooth |
autoHideScrollbar | boolean | false | Scrollbar only visible on hover/focus |
showScrollShadows | boolean | false | Pure-CSS edge shadows indicating more scrollable content |
scrolled | output<ScrollAreaScrollEvent> | — | Emits scroll metrics on every native scroll event |
Tokens
CSS custom properties zyra-scroll-area reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Focus ring--zyra-color-primary | var(--zyra-color-accent) | Inset focus ring shown when the scroll region itself is keyboard-focused. |
Scrollbar thumb--zyra-color-scrollbar-thumb | var(--zyra-color-scrollbar-thumb-base) | Color of the draggable scrollbar thumb. |
Scrollbar thumb (hover)--zyra-color-scrollbar-thumb-hover | var(--zyra-color-foreground-subtle) | Thumb color on hover. |
Scrollbar track--zyra-color-scrollbar-track | var(--zyra-color-scrollbar-track-base) | Color of the scrollbar track/gutter. |
Edge fade--zyra-scroll-area-fade-color | var(--zyra-color-surface) | Color the shadow-fade indicators blend into — should match the surface the scroll area sits on. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Focusable via tabindex="0" with role="region" and an aria-label
- Arrow/Home/End/PageUp/PageDown keys move the scroll position when focused