# Scroll area

A region that scrolls, with its scrollbar made as a machined rail: a groove cut into the plate and a thumb like a fader cap riding in it. Scrolling itself is the browser’s own.

Kit part · With the Kit · https://tactileui.dev/parts/scroll-area

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The rail is the scrollbar’s own parts, dressed: the track is the kit’s recess drawn as a groove (dark under its upper wall, the lower lip lit) and the thumb is the fader cap from the fader part, a light-to-dark face, a lit top edge, a skirt inside its lower one and one ink line across the middle. Held, the cap loses its skirt. The edge shade is the classic cover-and-shadow pair of background layers.

## Variants

- Plain · rail only
- Edges · a shade where there is more
- Well · cut into the plate
- Small rail
- Sideways
- Both axes

## States

- Rail at rest
- Keyboard focus
- Well
- Edges

## Props and options

| Name | Kind | Description |
| - | - | - |
| aria-label | attribute | What lets the keyboard scroll it, and names it. Not needed if a focusable control is inside. |
| ::-webkit-scrollbar-track · -thumb | pseudo-element | The groove and the cap. Where they are not understood the fallback below is used. |
| ↑ ↓ · Page Up / Down · Space · Home / End | keyboard | Scroll the focused area, as anywhere. |

## Usage notes

Scroll it with the wheel, a drag on the cap, or the keyboard: click in and use the arrows, Page Up and Down, Space, Home and End.

## Accessibility

- The keyboard scrolls what it can focus.
- It is the browser’s own scrolling, so the wheel, touch, momentum, Page Up and Down, Space and find-in-page work as people expect; nothing is intercepted.
- The edge shade is a second cue that there is more; on touch screens, where the rail is hidden, it is the only one.
- Smooth scrolling is on unless reduced motion is asked for.

## Related parts

- [Fader](https://tactileui.dev/parts/fader): A continuous value along a line: a native range whose cap rides in a slot cut into the plate, with a printed scale.
- [Table](https://tactileui.dev/parts/table): Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.
- [Tray](https://tactileui.dev/parts/tray): A recess cut into the plate that holds other parts: keys, a selector, an empty state waiting for its first thing.