> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Scroll area

> A custom scrollable viewport for content that exceeds available space, with consistent scrollbars across browsers and platforms.

## Scroll area

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-scrollarea--docs)

### When to use

* When content (lists, panels, sidebars, tables) exceeds the container height or width and must scroll within a fixed region.
* When native overflow scrolling needs consistent styling with the Aura design system.
* Inside [Dialog](/aura-design-system/primitives/dialog), [Popover](/aura-design-system/primitives/popover), or [Select panel](/aura-design-system/primitives/select-panel) bodies with long content.

### When to use something else

* For page-level loading, use [Page loader](/aura-design-system/primitives/page-loader) rather than an empty scroll region.
* When the whole page should scroll, prefer normal document flow instead of nesting scroll areas.

### Behavior

* Supports vertical and horizontal orientation depending on overflow direction.
* Preserve keyboard focus and scroll position when content updates asynchronously.

### Often used with

* [Separator](/aura-design-system/primitives/separator), [Menu](/aura-design-system/primitives/menu), [Tree view](/aura-design-system/primitives/tree-view), [Data grid](/aura-design-system/primitives/data-grid).