Scroll Area

Overview

Scroll Area provides custom, cross-browser styled scrollbars while maintaining native scroll behavior.

Features

Scrollbar sits on top of the scrollable content
Scrolling is native; no underlying position changes
Custom cross-browser styling
Supports both horizontal and vertical scrolling
Supports automatic hiding of scrollbars

Installation

npm install @radix-ui/react-scroll-area

Anatomy

import * as ScrollArea from '@radix-ui/react-scroll-area';

export default () => (
  <ScrollArea.Root>
    <ScrollArea.Viewport />
    <ScrollArea.Scrollbar orientation="vertical">
      <ScrollArea.Thumb />
    </ScrollArea.Scrollbar>
    <ScrollArea.Scrollbar orientation="horizontal">
      <ScrollArea.Thumb />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner />
  </ScrollArea.Root>
)

API Reference

Root

Contains all the parts of a scroll area.

'auto' | 'always' | 'scroll' | 'hover'

default:"'hover'"

Describes the nature of scrollbar visibility.

auto - Scrollbars are visible when content overflows
always - Scrollbars are always visible
scroll - Scrollbars are visible when scrolling
hover - Scrollbars are visible when hovering over the scroll area

number

default:"600"

Time in milliseconds before the scrollbars hide after the user stops interacting with scrollbars.

'ltr' | 'rtl'

The reading direction of the scroll area. If omitted, inherits globally from DirectionProvider or assumes LTR.

Viewport

The viewport area of the scroll area.

Scrollbar

The vertical or horizontal scrollbar.

'vertical' | 'horizontal'

default:"'vertical'"

The orientation of the scrollbar.

boolean

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

Thumb

The thumb to be used in a scrollbar.

Corner

The corner where both vertical and horizontal scrollbars meet.

Examples

Basic Usage

import * as ScrollArea from '@radix-ui/react-scroll-area';

export default () => (
  <ScrollArea.Root style={{ width: 200, height: 225 }}>
    <ScrollArea.Viewport style={{ width: '100%', height: '100%' }}>
      <div style={{ padding: 15 }}>
        {Array.from({ length: 50 }, (_, i) => (
          <div key={i}>Item {i + 1}</div>
        ))}
      </div>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="vertical">
      <ScrollArea.Thumb />
    </ScrollArea.Scrollbar>
    <ScrollArea.Scrollbar orientation="horizontal">
      <ScrollArea.Thumb />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner />
  </ScrollArea.Root>
);

Always Visible

import * as ScrollArea from '@radix-ui/react-scroll-area';

export default () => (
  <ScrollArea.Root type="always" style={{ width: 200, height: 225 }}>
    <ScrollArea.Viewport style={{ width: '100%', height: '100%' }}>
      <div style={{ padding: 15 }}>
        Content that overflows...
      </div>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar orientation="vertical">
      <ScrollArea.Thumb />
    </ScrollArea.Scrollbar>
  </ScrollArea.Root>
);

Overlays

Navigation

Forms

Layout

Data Display

Utilities

Overview

Features

Installation

Anatomy

API Reference

Root

Viewport

Scrollbar

Thumb

Corner

Examples

Basic Usage

Always Visible

Data Attributes

Scrollbar

Thumb

CSS Variables

Root

​Overview

​Features

​Installation

​Anatomy

​API Reference

​Root

​Viewport

​Scrollbar

​Thumb

​Corner

​Examples

​Basic Usage

​Always Visible

​Data Attributes

​Scrollbar

​Thumb

​CSS Variables

​Root

Overview

Features

Installation

Anatomy

API Reference

Root

Viewport

Scrollbar

Thumb

Corner

Examples

Basic Usage

Always Visible

Data Attributes

Scrollbar

Thumb

CSS Variables

Root