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 |
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