Scroll area
stable 1.6 kB<hk-scroll-area>Styled scrollbars with edge fades that track the real scroll position, so the fade only appears when there is genuinely more content that way.
#overflow
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| maxHeight | string | '20rem' | Height before the area scrolls. |
| fade | boolean | true | Shows gradient affordances at the scrollable edges. |
| axis | 'y' | 'x' | 'both' | 'y' | Which direction scrolls. |
Outputs
scrolledEventEmitter<{ top: boolean; bottom: boolean }>Emits when an edge is reached.
Keyboard
- ↑ / ↓ Scrolls when the area has focus
- Page Up / Page Down Scrolls by a viewport
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-scroll-thumb | #cbd5e1 | Scrollbar thumb. |
| --hk-scroll-width | 8px | Scrollbar thickness. |
| --hk-scroll-fade | 2rem | Height of the edge fade. |
Accessibility
- The region is focusable and keyboard-scrollable — custom scrollbars must not remove that.
- Fades are aria-hidden decoration and are driven by measured scroll position, never faked as always-on.