# Scroll area

Host: Radix UI. Path: keyframes. Preset: `fade`. Built against [radix-ui 1.6.7](https://www.npmjs.com/package/radix-ui/v/1.6.7).

The subtlest comparison here, so watch the bar leave rather than arrive. Scroll, stop, and wait: on the left the bar is removed on a single frame, on the right it fades. The hide delay is stretched well past the Radix default to make that visible at all. This is also a third state pair that means open and closed without saying so.

The page this file mirrors mounts the component twice, once with the attribute and once without, so the only difference between the two is the library.

Upstream documentation: [Radix UI documentation](https://www.radix-ui.com/primitives/docs/components/scroll-area)

The same component in other hosts: [Base UI](/base-ui/scroll-area.md).

## Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

```text
ScrollArea.Root
  ScrollArea.Viewport
  ScrollArea.Scrollbar  data-motion="fade"
```

## How the match works

| Step | Value |
| --- | --- |
| host writes | `data-state="visible" \| "hidden"` |
| easeful matches | `[data-motion~="fade"][data-state="hidden"]` |
| what runs | `animation: motion-exit 150ms` |
| you write | `<ScrollArea.Scrollbar data-motion="fade" />` |

## Every value that works here

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

| Value | Link |
| --- | --- |
| `fade` | the default |
| `scale-fade` | [scale-fade](/radix/scroll-area#motion=scale-fade) |
| `slide-up` | [slide-up](/radix/scroll-area#motion=slide-up) |
| `fade slide-up` | [fade slide-up](/radix/scroll-area#motion=fade%20slide-up) |
| `scale-fade slide-up` | [scale-fade slide-up](/radix/scroll-area#motion=scale-fade%20slide-up) |

## Source

`apps/docs/components/demos/radix/scroll-area.tsx`

```tsx
"use client"

import { ScrollArea } from "radix-ui"
import type { DemoProps } from "@/components/demos/props"

/* scrollHideDelay is stretched well past the Radix default. The scrollbar fade
 * is the subtlest comparison on the site, and at the default delay the bar is
 * gone before you can look at it. */
export function RadixScrollArea({ motion }: DemoProps) {
  return (
    <ScrollArea.Root className="scroller" type="scroll" scrollHideDelay={900}>
      <ScrollArea.Viewport className="scroller__viewport">
        <p>
          Scroll this box, then stop. Watch the bar on the right as it leaves rather than as it
          arrives.
        </p>
        <p>
          Without the attribute it is removed on the same frame the hide delay elapses. With it,
          the bar fades out.
        </p>
        <p>
          The scrollbar reports visible and hidden rather than open and closed, which is a third
          way of spelling the same state pair.
        </p>
        <p>Keep going so there is room to scroll.</p>
        <p>One last line.</p>
      </ScrollArea.Viewport>
      <ScrollArea.Scrollbar className="scroller__bar" orientation="vertical" data-motion={motion}>
        <ScrollArea.Thumb className="scroller__thumb" />
      </ScrollArea.Scrollbar>
    </ScrollArea.Root>
  )
}
```