Scroll Area · base-ui-svelte

Line 1 — scrollable content for the custom scrollbar demo.

Line 2 — scrollable content for the custom scrollbar demo.

Line 3 — scrollable content for the custom scrollbar demo.

Line 4 — scrollable content for the custom scrollbar demo.

Line 5 — scrollable content for the custom scrollbar demo.

Line 6 — scrollable content for the custom scrollbar demo.

Line 7 — scrollable content for the custom scrollbar demo.

Line 8 — scrollable content for the custom scrollbar demo.

Line 9 — scrollable content for the custom scrollbar demo.

Line 10 — scrollable content for the custom scrollbar demo.

Line 11 — scrollable content for the custom scrollbar demo.

Line 12 — scrollable content for the custom scrollbar demo.

Line 13 — scrollable content for the custom scrollbar demo.

Line 14 — scrollable content for the custom scrollbar demo.

Line 15 — scrollable content for the custom scrollbar demo.

Line 16 — scrollable content for the custom scrollbar demo.

Line 17 — scrollable content for the custom scrollbar demo.

Line 18 — scrollable content for the custom scrollbar demo.

Line 19 — scrollable content for the custom scrollbar demo.

Line 20 — scrollable content for the custom scrollbar demo.

Line 21 — scrollable content for the custom scrollbar demo.

Line 22 — scrollable content for the custom scrollbar demo.

Line 23 — scrollable content for the custom scrollbar demo.

Line 24 — scrollable content for the custom scrollbar demo.

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

ScrollArea.Root

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

Props

overflowEdgeThreshold number 0

Name: overflowEdgeThreshold
Description: Distance from an edge (px) at which overflow data attributes become active.
Type: number | { top?: number; right?: number; bottom?: number; left?: number }
Default: 0

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-overflow-bottom`	Present on the element when applicable.
`data-overflow-left`	Present on the element when applicable.
`data-overflow-right`	Present on the element when applicable.
`data-overflow-top`	Present on the element when applicable.
`data-overflow-x`	Present on the element when applicable.
`data-overflow-y`	Present on the element when applicable.
`data-scrolling`	Present when the user scrolls inside the scroll area.

ScrollArea.Content

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

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-scrolling`	Present when the user scrolls inside the scroll area.

ScrollArea.Corner

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

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-scrolling`	Present on the element when applicable.

ScrollArea.Scrollbar

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

Props

orientation ScrollAreaOrientation 'horizontal'

Name: orientation
Description: Whether the scrollbar controls vertical or horizontal scroll.
Type: ScrollAreaOrientation
Default: 'horizontal'

keepMounted boolean false

Name: keepMounted
Description: Whether to keep the HTML element in the DOM when the viewport isn't scrollable.
Type: boolean
Default: false

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-orientation`	Indicates the orientation of the scrollbar.
`data-scrolling`	Present when the user scrolls inside the scroll area.

ScrollArea.Thumb

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

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-orientation`	Indicates the orientation of the scrollbar.
`data-scrolling`	Present when the user scrolls inside the scroll area.
`data-slot`	Present on the element when applicable.

ScrollArea.Viewport

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

Props

children snippet —

Name: children
Description: Content rendered inside the part.
Type: Snippet

Data attributes

Attribute	Description
`data-scrolling`	Present when the user scrolls inside the scroll area.