# SvScrollArea
A scroll container with the kit's themed custom scrollbars, so any panel matches
the grid and demos without hand-rolling scrollbar CSS.
`SvScrollArea` wraps content in an overflow container styled through the
`--sg-scrollbar-*` tokens (Firefox `scrollbar-color` plus Chromium
`::-webkit-scrollbar`). The fallbacks derive from `--sg-fg`, so the scrollbar
adapts to light and dark even when no preset defines the tokens. Overscroll is
contained, so scrolling a nested area does not chain to the page.
Related: [SvCard](https://svgrid.com/docs/help/ui-components/sv-card/) · [SvSplitter](https://svgrid.com/docs/help/ui-components/sv-splitter/) · [Layout & composite overview](https://svgrid.com/docs/help/ui-components/layout/)
## Installation
Add it with the CLI - this drops a ready-to-edit `SvScrollArea` starter into your app:
Prefer to see it first? `npx @svgrid/ui try scroll-area` opens it in a throwaway sandbox - no project needed.
Or install the package and import it directly. `SvScrollArea` ships free in
`@svgrid/grid` (dependency-free):
The examples on this page import from `@svgrid/grid`:
```svelte
```
```ts
import { SvScrollArea } from '@svgrid/grid'
```
## Example
> Live demo: Command palette (⌘K) + sparklines, avatars, scroll - https://svgrid.com/demos/340-command-palette/
```svelte
```
## Props
| Prop | Type | Default | Description |
| ------------ | --------- | ------- | -------------------------------------------------------------- |
| `maxHeight` | `string` | - | Any CSS length; the area scrolls once content exceeds it. |
| `height` | `string` | - | Fixed height (the area always fills and scrolls within it). |
| `horizontal` | `boolean` | `false` | Scroll horizontally instead of vertically. |
| `ariaLabel` | `string` | `'Scrollable content'` | Accessible name for the scrollable region. |
| `children` | `Snippet` | - | The scrollable content. |
## Examples
### Capped list
Give a `maxHeight` so a long list scrolls in place instead of growing the page:
```svelte
{#each rows as row}{/each}
```
### Fixed-height panel
Use `height` when the area must fill a known space - for example a pane inside an
[SvSplitter](https://svgrid.com/docs/help/ui-components/sv-splitter/):
```svelte
…detail…
```
### Horizontal strip
Set `horizontal` for a themed left/right scroller, such as a wide toolbar or a
chip row that overflows its container.
### Log viewer
Cap a growing log to a fixed height so new lines scroll within the panel instead of
pushing the page down. It nests cleanly inside a `flush` [SvCard](https://svgrid.com/docs/help/ui-components/sv-card/):
```svelte
{#each lines as line}{line + '\n'}{/each}
```
**Tip:** overscroll is contained, so reaching the bottom of the log does not start
scrolling the page behind it - nested scroll areas stay independent.
## Accessibility
- A scroll container is keyboard-scrollable once focused; place focusable content
inside so users can `Tab` to it and scroll with the arrow keys / `Page` keys.
- The custom scrollbars are cosmetic only - native scrolling, wheel, and touch
behaviour are unchanged.
## See also
- [SvCard](https://svgrid.com/docs/help/ui-components/sv-card/) - a surface whose body a scroll area can cap.
- [SvSplitter](https://svgrid.com/docs/help/ui-components/sv-splitter/) - resizable panes to host scroll areas.
- [Layout overview](https://svgrid.com/docs/help/ui-components/layout/) - the whole layout family at a glance.
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-components/sv-scroll-area/ . All docs: https://svgrid.com/llms.txt