Mushilu-San UI Scroll area
A region with a styled scrollbar for content that is taller or wider than its box.
Selector: mui-scroll-area
import { ScrollArea } from '@mushilu-san/ui/layout';Loading example…
Overview
orientation to vertical, horizontal or both.
When to use
A long list or log inside a fixed-height panel. A wide table or code block that should not change the page width.
When not to use
The whole page. The browser scrolls it already.
Guidelines
Do
Give the area a fixed height so it is clear it scrolls. Give the region a label when it contains a list the user needs to find.
Don't
Do not nest scroll areas. Two scrollbars confuse users.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | — |
Keyboard
| Keys | Action |
|---|---|
| Arrow keys, PageUpPageDown, HomeEnd |
Make sure the content is reachable by keyboard. Focusable items inside should scroll into view.
API
ScrollArea
| Name | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'both' | 'vertical' | Which axes scroll: `vertical`, `horizontal` or `both`. Default `vertical`. |
CSS parts
::part(root)::part(viewport)
Tokens
--mui-color-border--mui-color-focus-ring--mui-radius-md