Scroll Area

A native scroll container with custom scrollbars.

View as Markdown

Anatomy

Import the component and assemble its parts:

Anatomy

API reference

Root

Groups all parts of the scroll area. Renders a <div> element.

className

string | function

Description

CSS class applied to the element, or a function that returns a class based on the component’s state.

Type

| string
| ((state: ScrollArea.Root.State) => string)

render

ReactElement | function

Name
Description

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.

Type

| ReactElement
| ((props: HTMLProps, state: ScrollArea.Root.State) => ReactElement)

--scroll-area-corner-height

The scroll area's corner height.

--scroll-area-corner-width

The scroll area's corner width.

Viewport

The actual scrollable container of the scroll area. Renders a <div> element.

className

string | function

Description

CSS class applied to the element, or a function that returns a class based on the component’s state.

Type

| string
| ((state: ScrollArea.Viewport.State) => string)

render

ReactElement | function

Name
Description

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.

Type

| ReactElement
| ((props: HTMLProps, state: ScrollArea.Viewport.State) => ReactElement)

Content

A container for the content of the scroll area. Renders a <div> element.

className

string | function

Description

CSS class applied to the element, or a function that returns a class based on the component’s state.

Type

| string
| ((state: ScrollArea.Content.State) => string)

render

ReactElement | function

Name
Description

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.

Type

| ReactElement
| ((props: HTMLProps, state: ScrollArea.Content.State) => ReactElement)

Scrollbar

A vertical or horizontal scrollbar for the scroll area. Renders a <div> element.

orientation

'horizontal' | 'vertical'

(default:

'vertical'

)
Description

Whether the scrollbar controls vertical or horizontal scroll.

Type

'horizontal' | 'vertical'

Default

'vertical'

className

string | function

Description

CSS class applied to the element, or a function that returns a class based on the component’s state.

Type

| string
| ((state: ScrollArea.Scrollbar.State) => string)

keepMounted

boolean

(default:

false

)
Description

Whether to keep the HTML element in the DOM when the viewport isn’t scrollable.

Type

boolean

Default

false

render

ReactElement | function

Name
Description

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.

Type

| ReactElement
| ((props: HTMLProps, state: ScrollArea.Scrollbar.State) => ReactElement)

data-orientation

Indicates the orientation of the scrollbar.

data-hovering

Present when the pointer is over the scroll area.

data-scrolling

Present when the users scrolls inside the scroll area.

--scroll-area-thumb-height

The scroll area thumb's height.

--scroll-area-thumb-width

The scroll area thumb's width.

Thumb

The draggable part of the the scrollbar that indicates the current scroll position. Renders a <div> element.

className

string | function

Description

CSS class applied to the element, or a function that returns a class based on the component’s state.

Type

| string
| ((state: ScrollArea.Thumb.State) => string)

render

ReactElement | function

Name
Description

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.

Type

| ReactElement
| ((props: HTMLProps, state: ScrollArea.Thumb.State) => ReactElement)

data-orientation

Indicates the orientation of the scrollbar.

Corner

A small rectangular area that appears at the intersection of horizontal and vertical scrollbars. Renders a <div> element.

className

string | function

Description

CSS class applied to the element, or a function that returns a class based on the component’s state.

Type

| string
| ((state: ScrollArea.Corner.State) => string)

render

ReactElement | function

Name
Description

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.

Type

| ReactElement
| ((props: HTMLProps, state: ScrollArea.Corner.State) => ReactElement)