Scroll Area

A custom scrollable area component with styled scrollbars.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Features

Cross-browser custom scrollbars
Native scroll behavior
Keyboard navigation support
Touch and mouse support
Horizontal and vertical scrolling
Support for nested scroll areas
Customizable scrollbar appearance

Anatomy

To set up the scroll area correctly, it's essential to understand its anatomy and the naming of its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Required style

It's important to note that the scroll area requires the following styles on the ScrollArea.Viewport element to hide the native scrollbar:

[data-scope='scroll-area'][data-part='viewport'] {
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

Examples

Basic Usage

Create a basic scrollable area with custom scrollbar.

Example not found

Example not found

Example not found

Example not found

Horizontal Scrolling

Configure the scroll area for horizontal scrolling only.

Example not found

Example not found

Example not found

Example not found

Both Directions

Enable scrolling in both horizontal and vertical directions.

Example not found

Example not found

Example not found

Example not found

Nested Scroll Areas

Scroll areas can be nested within each other for complex layouts.

Example not found

Example not found

Example not found

Example not found

API Reference

Props

Root

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`ids`		`Partial<{ root: string; viewport: string; content: string; scrollbar: string; thumb: string }>` The ids of the scroll area elements

CSS Variable	Description
`--corner-width`	The width of the Root
`--corner-height`	The height of the Root
`--thumb-width`	The width of the slider thumb
`--thumb-height`	The height of the slider thumb

Data Attribute	Value
`[data-scope]`	scroll-area
`[data-part]`	root
`[data-overflow-x]`	Present when the content overflows the x-axis
`[data-overflow-y]`	Present when the content overflows the y-axis

Content

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	scroll-area
`[data-part]`	content
`[data-overflow-x]`	Present when the content overflows the x-axis
`[data-overflow-y]`	Present when the content overflows the y-axis

Corner

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	scroll-area
`[data-part]`	corner
`[data-hover]`	Present when hovered
`[data-state]`	"hidden" \| "visible"
`[data-overflow-x]`	Present when the content overflows the x-axis
`[data-overflow-y]`	Present when the content overflows the y-axis

RootProvider

Prop	Default	Type
`value`		`UseScrollAreaReturn`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Scrollbar

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`orientation`		`Orientation`

Data Attribute	Value
`[data-scope]`	scroll-area
`[data-part]`	scrollbar
`[data-orientation]`	The orientation of the scrollbar
`[data-scrolling]`	Present when scrolling
`[data-hover]`	Present when hovered
`[data-dragging]`	Present when in the dragging state
`[data-overflow-x]`	Present when the content overflows the x-axis
`[data-overflow-y]`	Present when the content overflows the y-axis

Thumb

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	scroll-area
`[data-part]`	thumb
`[data-orientation]`	The orientation of the thumb
`[data-hover]`	Present when hovered
`[data-dragging]`	Present when in the dragging state

Viewport

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Data Attribute	Value
`[data-scope]`	scroll-area
`[data-part]`	viewport
`[data-at-top]`	Present when scrolled to the top edge
`[data-at-bottom]`	Present when scrolled to the bottom edge
`[data-at-left]`	Present when scrolled to the left edge
`[data-at-right]`	Present when scrolled to the right edge
`[data-overflow-x]`	Present when the content overflows the x-axis
`[data-overflow-y]`	Present when the content overflows the y-axis

Context

These are the properties available when using UscrollUarea.Context, useUscrollUareaContext hook or useUscrollUarea hook.

API

Property	Type
`isAtTop`	`boolean` Whether the scroll area is at the top
`isAtBottom`	`boolean` Whether the scroll area is at the bottom
`isAtLeft`	`boolean` Whether the scroll area is at the left
`isAtRight`	`boolean` Whether the scroll area is at the right
`hasOverflowX`	`boolean` Whether the scroll area has horizontal overflow
`hasOverflowY`	`boolean` Whether the scroll area has vertical overflow
`getScrollProgress`	`() => Point` Get the scroll progress as values between 0 and 1
`scrollToEdge`	`(details: ScrollToEdgeDetails) => void` Scroll to the edge of the scroll area
`scrollTo`	`(details: ScrollToDetails) => void` Scroll to specific coordinates
`getScrollbarState`	`(props: ScrollbarProps) => ScrollbarState` Returns the state of the scrollbar