# Scroll area

> Style native scrollbars across browsers without replacing native scrolling.

## Usage

Add `.scroll-area` to a container with a bounded height or width. It applies `overflow: auto`, a thin scrollbar, and theme-aware colors. Wheel, touch, keyboard, and scrollbar dragging remain native. It needs no JavaScript initialization.

## Tags

-   v1.2.0-beta.50
-   v1.2.0-beta.49
-   v1.2.0-beta.48
-   v1.2.0-beta.47
-   v1.2.0-beta.46
-   v1.2.0-beta.45
-   v1.2.0-beta.44
-   v1.2.0-beta.43
-   v1.2.0-beta.42
-   v1.2.0-beta.41
-   v1.2.0-beta.40
-   v1.2.0-beta.39
-   v1.2.0-beta.38
-   v1.2.0-beta.37
-   v1.2.0-beta.36
-   v1.2.0-beta.35
-   v1.2.0-beta.34
-   v1.2.0-beta.33
-   v1.2.0-beta.32
-   v1.2.0-beta.31
-   v1.2.0-beta.30
-   v1.2.0-beta.29
-   v1.2.0-beta.28
-   v1.2.0-beta.27
-   v1.2.0-beta.26
-   v1.2.0-beta.25
-   v1.2.0-beta.24
-   v1.2.0-beta.23
-   v1.2.0-beta.22
-   v1.2.0-beta.21
-   v1.2.0-beta.20
-   v1.2.0-beta.19
-   v1.2.0-beta.18
-   v1.2.0-beta.17
-   v1.2.0-beta.16
-   v1.2.0-beta.15
-   v1.2.0-beta.14
-   v1.2.0-beta.13
-   v1.2.0-beta.12
-   v1.2.0-beta.11
-   v1.2.0-beta.10
-   v1.2.0-beta.9
-   v1.2.0-beta.8
-   v1.2.0-beta.7
-   v1.2.0-beta.6
-   v1.2.0-beta.5
-   v1.2.0-beta.4
-   v1.2.0-beta.3
-   v1.2.0-beta.2
-   v1.2.0-beta.1

```
<div class="scroll-area p-4" style="width: 12rem; height: 18rem"
  tabindex="0" role="region" aria-labelledby="release-tags-title">
  <h2 id="release-tags-title" class="title-small mt-0">Tags</h2>
  <ul>
    <li>v1.2.0-beta.50</li>
    <li>v1.2.0-beta.49</li>
    <!-- More tags -->
  </ul>
</div>
```

Give a generic scroll region `tabindex="0"` and an accessible name so keyboard users can focus and scroll it. Keep padding for child focus rings. In a flex or grid layout, add `min-h-0` or `min-w-0` when the scroll container needs to shrink.

## Horizontal scrolling

The same class scrolls horizontally when content exceeds the container's width.

Stable releasesBeta releasesNightly buildsArchived releases

```
<div class="scroll-area p-2" style="max-width: 24rem"
  tabindex="0" role="region" aria-label="Release channels">
  <div class="inline-flex gap-3 text-nowrap">
    <span class="surface-container p-4">Stable releases</span>
    <span class="surface-container p-4">Beta releases</span>
    <span class="surface-container p-4">Nightly builds</span>
    <span class="surface-container p-4">Archived releases</span>
  </div>
</div>
```

## Page scrollbar

Add the class to `<html>` to style the page's own scrollbar. The viewport keeps native scrolling, and the thumb color follows the theme.

```
<html lang="en" class="scroll-area">
```

## Custom styling

Set these properties on the scroll container or an ancestor.

| Property | Default |
| --- | --- |
| `--scroll-area-thumb-color` | `var(--md-sys-color-on-surface-variant)` |
| `--scroll-area-track-color` | `transparent` |

```
.release-tags {
  --scroll-area-thumb-color: var(--md-sys-color-primary);
  --scroll-area-track-color: var(--md-sys-color-surface-container);
}
```

Use colors with enough contrast against the track and container. [Native scrollbar styling](https://www.w3.org/TR/css-scrollbars-1/) follows the browser and operating system, so shape, exact width, and automatic hiding can differ. Older WebKit engines use rounded 8px scrollbars. Forced-colors mode restores system colors and the default width.

For a selective Sass build, include `"scroll-area"` in `$utilities`.