ScrollArea

An unstyled, accessible scroll area component with custom scrollbar support.

Build fully custom scrollable regions with complete control over scrollbar design and styling.

Autocomplete

Avatar

Badge

Breadcrumb

Button

Calendar

Card

Carousel

Checkbox

Chip

Color Picker

Combobox

Context Menu

Data Table

Date Picker

Dialog

Divider

Drawer

Dropdown

File Upload

Gallery

Icon

Input

Knob

Listbox

Menubar

Message

Multiselect

Notification

Paginator

Panel

Password

Popover

Progress

Radio

Rating

Scroll Area

Select

Skeleton

Slider

Splitter

Stepper

Tab

Tag

Textarea

Toast

Toggle

Toolbar

Tooltip

Tree

Tree Table

basic-demo

Pre-styled Versions

Choose a pre-styled library to use ScrollArea with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with six sub-components: Root, Viewport, Content, Scrollbar, Thumb, Corner
Automatic thumb sizing based on viewport-to-content ratio
Pointer-based drag interaction on both scrollbar track and thumb
ResizeObserver for automatic recalculation on content changes
Variant-based scrollbar visibility control (auto, hover, scroll, always, hidden)
Scroll edge detection for fade effects and loading indicators

Usage#

import { ScrollArea } from 'primereact/scrollarea';

<ScrollArea.Root>
    <ScrollArea.Viewport>
        <ScrollArea.Content></ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar>
        <ScrollArea.Thumb />
    </ScrollArea.Scrollbar>
</ScrollArea.Root>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<ScrollArea.Root as="section">
    <ScrollArea.Viewport as="main">
        <ScrollArea.Content as="article"></ScrollArea.Content>
    </ScrollArea.Viewport>
</ScrollArea.Root>

Render Function Children#

Sub-components accept a render function as children, providing access to the component instance.

<ScrollArea.Root>{(instance) => <div>{instance.state.scrolling ? 'Scrolling...' : 'Idle'}</div>}</ScrollArea.Root>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

Autocomplete

Avatar

Badge

Breadcrumb

Button

Calendar

Card

Carousel

Checkbox

Chip

Color Picker

Combobox

Context Menu

Data Table

Date Picker

Dialog

Divider

Drawer

Dropdown

File Upload

Gallery

Icon

Input

Knob

Listbox

Menubar

Message

Multiselect

Notification

Paginator

Panel

Password

Popover

Progress

Radio

Rating

Scroll Area

Select

Skeleton

Slider

Splitter

Stepper

Tab

Tag

Textarea

Toast

Toggle

Toolbar

Tooltip

Tree

Tree Table

/* Select a part to see its CSS selector for custom styling */

API#

ScrollAreaRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ScrollAreaRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ScrollAreaRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ScrollAreaRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ScrollAreaRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ScrollAreaRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`step`	`number`	`5`
Step factor to scroll the content while pressing the arrow keys.
`variant`	`"hidden"` \| `"auto"` \| `"always"` \| `"scroll"` \| `"hover"`	`'auto'`
Controls scrollbar visibility behavior. - `auto` : visible on hover or while scrolling - `hover` : visible on hover - `scroll` : visible while scrolling - `always` : always visible - `hidden` : never visible but still scrollable
`mask`	`boolean`	`false`
When enabled, a mask is added to the scrollable content to provide a visual indication of overflow.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"scrollarea"`
`data-part`	`"root"`
`data-variant`	Current variant value
`data-scrolling`	Present when actively scrolling
`data-has-overflow-x`	Present when content overflows horizontal
`data-has-overflow-y`	Present when content overflows vertical
`data-scroll-x-before`	Present when scrolled past left edge
`data-scroll-x-after`	Present when content remains to the right
`data-scroll-y-before`	Present when scrolled past top edge
`data-scroll-y-after`	Present when content remains below

CSS Custom Properties

The Root element sets CSS custom properties on its style for scrollbar corner sizing.

CSS Variable	Description
`--corner-height`	Height of the scrollbar corner in pixels
`--corner-width`	Width of the scrollbar corner in pixels

Defines passthrough(pt) options of ScrollArea component.

label	type	description
root	ScrollAreaRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
viewport	ScrollAreaRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the viewport's DOM element.
scrollbar	ScrollAreaRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the scrollbar's DOM element.
thumb	ScrollAreaRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the thumb's DOM element.
corner	ScrollAreaRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the corner's DOM element.

ScrollAreaViewport#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ScrollAreaViewportInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ScrollAreaViewportInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ScrollAreaViewportInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ScrollAreaViewportPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ScrollAreaViewportInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"scrollarea"`
`data-part`	`"viewport"`

Defines passthrough(pt) options of ScrollAreaViewport component.

label	type	description
root	ScrollAreaViewportPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

ScrollAreaContent#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ScrollAreaContentInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ScrollAreaContentInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ScrollAreaContentInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ScrollAreaContentPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ScrollAreaContentInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of ScrollAreaContent component.

label	type	description
root	ScrollAreaContentPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

ScrollAreaScrollbar#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ScrollAreaScrollbarInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ScrollAreaScrollbarInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ScrollAreaScrollbarInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ScrollAreaScrollbarPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ScrollAreaScrollbarInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`orientation`	`"horizontal"` \| `"vertical"`	`'vertical'`
The orientation of the scrollbar.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"scrollarea"`
`data-part`	`"scrollbar-y"` or `"scrollbar-x"`

CSS Custom Properties

The Scrollbar element sets CSS custom properties on its style for thumb sizing and positioning. The specific variables depend on the scrollbar orientation.

CSS Variable	Description
`--thumb-height`	Height of the vertical scrollbar thumb in pixels
`--thumb-width`	Width of the horizontal scrollbar thumb in pixels
`--thumb-offset`	Offset position of the thumb along the scrollbar track

Defines passthrough(pt) options of ScrollAreaScrollbar component.

label	type	description
root	ScrollAreaScrollbarPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ScrollAreaThumb#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ScrollAreaThumbInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ScrollAreaThumbInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ScrollAreaThumbInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ScrollAreaThumbPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ScrollAreaThumbInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"scrollarea"`
`data-part`	`"thumb-y"` or `"thumb-x"`

Defines passthrough(pt) options of ScrollAreaThumb component.

label	type	description
root	ScrollAreaThumbPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ScrollAreaCorner#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: ScrollAreaCornerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: ScrollAreaCornerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`ScrollAreaCornerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<ScrollAreaCornerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ScrollAreaCornerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"scrollarea"`
`data-part`	`"corner"`

Defines passthrough(pt) options of ScrollAreaCorner component.

label	type	description
root	ScrollAreaCornerPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

ScrollAreaThumbY#

Defines passthrough(pt) options of ScrollAreaThumbY component.

label	type	description
root	ScrollAreaThumbYPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

ScrollAreaThumbX#

Defines passthrough(pt) options of ScrollAreaThumbX component.

label	type	description
root	ScrollAreaThumbXPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

Scrollbars use the scrollbar role with aria-controls referencing the scrollable content container and aria-orientation to indicate the scrolling direction.

Keyboard Support#

Key	Function
`tab`	Moves focus through the scrollable region.
`down arrow`	Scrolls content down when vertical scrolling is available.
`up arrow`	Scrolls content up when vertical scrolling is available.
`left arrow`	Scrolls content left when horizontal scrolling is available.
`right arrow`	Scrolls content right when horizontal scrolling is available.

ScrollArea

Pre-styled Versions

Features#

Usage#

Behavior#

Polymorphic Rendering#

Render Function Children#

Pass Through#

API#

ScrollAreaRoot#

ScrollAreaViewport#

ScrollAreaContent#

ScrollAreaScrollbar#

ScrollAreaThumb#

ScrollAreaCorner#

ScrollAreaThumbY#

ScrollAreaThumbX#

Accessibility#

Screen Reader#

Keyboard Support#