ScrollArea
ScrollArea is a cross browser, lightweight and themable alternative to native browser scrollbar.
Usage #
Examples #
Basic #
A custom scrollable container with styled scrollbars.
Horizontal #
ScrollArea supports horizontal scrolling for content that extends beyond the horizontal viewport.
Both Scrollbars #
Both vertical and horizontal scrollbars are displayed when the content overflows in both directions.
Scroll Fade #
The mask property adds a gradient fade effect at the scroll edges.
Variant #
Change the visibility behavior of scrollbars with the variant property.
Custom #
Scrollbar and thumb elements can be customized using classes on the sub-components.
Accessibility #
Screen Reader
ScrollArea hides the native scrollbar visually while leaving the underlying viewport scrollable. The viewport remains keyboard scrollable so assistive technologies can still navigate the content using standard scroll semantics.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to interactive content inside the scroll area. |
| arrow keys | Scroll the focused viewport in the corresponding direction (native browser behaviour). |
| page up / page down | Scroll by one viewport height. |
| home / end | Scroll to the start or the end of the viewport. |