'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Layout
ScrollArea
A scrolling region with thin themed scrollbars and fades that show there is more.
Ant Design: -
import { ScrollArea } from '@alea/ui';
Examples
Scroll with fades
The fade shows there is more; the region is focusable when it scrolls.
v1.24.0: small fixes and new tokens
v1.23.0: small fixes and new tokens
v1.22.0: small fixes and new tokens
v1.21.0: small fixes and new tokens
v1.20.0: small fixes and new tokens
v1.19.0: small fixes and new tokens
v1.18.0: small fixes and new tokens
v1.17.0: small fixes and new tokens
v1.16.0: small fixes and new tokens
v1.15.0: small fixes and new tokens
v1.14.0: small fixes and new tokens
v1.13.0: small fixes and new tokens
v1.12.0: small fixes and new tokens
v1.11.0: small fixes and new tokens
v1.10.0: small fixes and new tokens
v1.9.0: small fixes and new tokens
v1.8.0: small fixes and new tokens
v1.7.0: small fixes and new tokens
v1.6.0: small fixes and new tokens
v1.5.0: small fixes and new tokens
v1.4.0: small fixes and new tokens
v1.3.0: small fixes and new tokens
v1.2.0: small fixes and new tokens
v1.1.0: small fixes and new tokens
Props
ScrollArea props
A scrolling region with thin themed scrollbars and fades that show there is more (Radix ScrollArea, Mantine ScrollArea). Focusable only when it scrolls.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-labelrequired | string | - | Name, so keyboard users can find and scroll it. |
className | string | - | Extra class names for the root element. |
direction | "horizontal" | "vertical" | "both" | 'vertical' | vertical (default), horizontal or both. |
height | string | number | 240 | Max height (or height) in px or CSS. |
Accessibility
- When it scrolls, it becomes a focusable named region so keyboard users can scroll it.
Keyboard
| Key | Does |
|---|---|
| Tab | Focuses the area when it scrolls |
| Arrow keys, Page Up / Down | Scroll it |
Do and don't
Do
- Give it an aria-label: it becomes a focusable region when it scrolls.
- Keep enough height to show several lines.
Don't
- Don't nest scroll areas.
- Don't use it to hide content people must read.