A scrollable region with a slim scrollbar that follows the theme and works with the keyboard. It uses the browser's own scrolling, so touch, wheel and trackpad behave as usual.
Set a height and the content scrolls when it is taller. Add an aria-label so screen readers name the region.
Use orientation to scroll sideways, or both for both directions. A sideways scrollbar gets space below the content, scrollbar='hover' shows it only while the pointer is over the area, and the mouse wheel scrolls it sideways.
Use scrollbar='hover' to show the scrollbar only while the pointer or the focus is inside.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| orientation | direction of the scroll | 'vertical' / 'horizontal' / 'both' | - | 'vertical' |
| scrollbar | 'hover' hides the scrollbar until the pointer or the focus is inside | 'always' / 'hover' | - | 'always' |
| height | height of the region; a number is a multiple of the theme unit | string / number | '160px', ... | auto |
| className | class of the root element | string | - | - |
| ... | native props, passed to the scrolling element | HTMLAttributes | 'id', 'aria-label', ... | - |
The ref points at the scrolling element, so you can read or set scrollTop and scrollLeft.
The region takes focus with Tab, so the arrow keys, Page Up, Page Down, Home and End scroll it without a mouse. Pass aria-label or aria-labelledby to name it.