Scroll area ported
A native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows.
A native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows.
Loading demo…
Guidance
When to use
- Panels, sidebars, and popovers whose content can outgrow their box.
- Horizontal strips of cards or chips that need mouse-wheel scrolling and snap points.
- Places where platform scrollbars look heavy but native scrolling must be kept.
When not to use
- Use carousel when items should page one at a time with controls.
- Do not wrap the whole page; let the document scroll natively.
- Use data-grid for large tabular data; it virtualizes its own scroll.
pnpm dlx shadcn-svelte@latest add @arcui/scroll-areaUsage
<script lang="ts">
import { ScrollArea } from '$lib/components/scroll-area';
</script>
<ScrollArea />Variants & Examples
Default
Standard appearance and configuration.
<ScrollArea />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
fade | number | '28' | Length of the edge fade in px. 0 turns the fades off. |
hideDelay | number | '900' | How long scrollbars linger after scrolling stops, in ms. |
maxHeight | CSSProperties["maxHeight"] | – | Maximum viewport height, for vertical areas that grow with their content. |
snap | CSSProperties["scrollSnapType"] | – | Passed to the viewport's scroll-snap-type, for example \"x mandatory\". Children set their own scroll-snap-align. |
label | string | – | Accessible name. The viewport becomes a labelled region. |
wheelToHorizontal | boolean | 'true' | Turns vertical wheel movement into horizontal scrolling for horizontal areas. |
viewportClassName | string | – | Extra class on the scrolling viewport. |
viewportStyle | CSSProperties | – | Inline style on the viewport. |
viewportRef | Ref<HTMLDivElement> | – | The scrolling element, for programmatic scrolling. |
onScroll | (event: UIEvent<HTMLDivElement>) => void | – | Viewport scroll handler. |
onEdgeChange | (edges: ScrollAreaEdges) => void | – | Called when content starts or stops extending past an edge: { top, bottom, left, right }. |
...props | HTMLAttributes<HTMLDivElement> | – | Forwarded to the root, including ref and className. |
Keyboard Interactions
| Key | Action |
|---|---|
Tab | The viewport is focusable (tabIndex 0). |
Arrow keys / Page Up / Page Down / Home / End / Space | Scroll natively once the viewport has focus. |
Accessibility
- Scrolling stays native, so keyboard, screen reader, and touch behavior match the platform.
- With label, the viewport is a named region; without one, give it context another way.
- The overlay tracks and thumbs are aria-hidden; the hidden native scrollbar remains the real control.
Motion
- Scrollbars fade in while scrolling or on hover and fade out after hideDelay; the thumb thickens under the pointer. - Pressing the track pages 90% of the viewport toward the pointer with smooth scrolling, or instantly under reduced motion. - Reduced motion removes scrollbar transitions.
Notes for AI
- Use it wherever content scrolls inside a fixed box: sidebars, panels, menus, horizontal card strips.
- Give vertical areas a height or maxHeight; the viewport scrolls only when it has a constrained size.
- Use onEdgeChange to show a "more below" affordance or to load more when bottom becomes false.
Source of truth: registry/components/scroll-area/scroll-area.tsx