ScrollArea

Provide scrollable content with a consistent scrollbar for long lists, panels, and constrained spaces.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use ScrollArea for a region that needs independent scrolling. Avoid accidental layers of nested page scrolling. Prefer Table’s own local horizontal viewport for tables.

axis chooses the scroll direction. The content or host needs a finite size for scrolling to occur.
bind:viewport exposes the actual scrolling element and onscroll receives its events. Use ariaLabel to describe the region.
The default scroll viewport name follows LocaleProvider; an explicit ariaLabel takes priority. Children remain caller-owned content.

Import

import { ScrollArea } from '@snowui-design-system/components';

Usage

Horizontal

Horizontal scrollbar visibility

Both axes

API Reference

Property	Type	Default	Example	Description
`axis`	`ScrollAreaAxis`	`"vertical"`	`axis={value}`	Allowed scroll direction.
`horizontalTrackPosition`	`ScrollAreaHorizontalTrackPosition`	`"container"`	`horizontalTrackPosition={value}`	Anchor the horizontal track to the container bottom, or keep it near the viewport bottom as a tall container passes through the page viewport.
`horizontalScrollbarVisibility`	`"always" \| "hover"`	`"always"`	`horizontalScrollbarVisibility="always"`	Show the horizontal scrollbar whenever content overflows, or only while the pointer is inside the region.
`ariaLabel`	`string`	`—`	`ariaLabel="Example"`	Accessible name for the scroll viewport. When omitted, follows LocaleProvider; an explicit value takes priority.
`viewport`	`HTMLElement`	`—`	`bind:viewport={viewport}`	Exposed internal scrolling viewport for reading or setting native scroll position.
`onscroll`	`(event: Event) => void`	`—`	`onscroll={(value) => { /* handle value */ }}`	Native scroll event from the viewport.
`children`	`Snippet`	`—`	`<ScrollArea>Content</ScrollArea>`	Any scrollable content.