◇

ScrollArea

10 parts

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  ScrollAreaCorner,
  ScrollAreaRoot,
  ScrollAreaScrollbar,
  ScrollAreaScrollbarAuto,
  ScrollAreaScrollbarHover,
  ScrollAreaScrollbarImpl,
  ScrollAreaScrollbarScroll,
  ScrollAreaScrollbarVisible,
  ScrollAreaThumb,
  ScrollAreaViewport,
} from '@robonen/primitives/scroll-area';

<ScrollAreaCorner>
  <ScrollAreaRoot />
  <ScrollAreaScrollbar />
  <ScrollAreaScrollbarAuto />
  <ScrollAreaScrollbarHover />
  <ScrollAreaScrollbarImpl />
  <ScrollAreaScrollbarScroll />
  <ScrollAreaScrollbarVisible />
  <ScrollAreaThumb />
  <ScrollAreaViewport />
</ScrollAreaCorner>

API Reference

ScrollAreaCorner

Corner

No props or events — renders its element and forwards attributes.

ScrollAreaRoot

Root

Prop	Type	Default	Description
`type`?	`ScrollAreaType`	`'hover'`	Visibility behaviour for scrollbars. - `auto`: visible whenever content overflows. - `always`: always visible. - `scroll`: visible while the user is scrolling, then hides after `scrollHideDelay`. - `hover`: visible while the pointer is over the root, then hides after `scrollHideDelay`.
`dir`?	`'ltr' \| 'rtl'`	—	Reading direction. Inherits from `ConfigProvider` when omitted.
`scrollHideDelay`?	`number`	`600`	For `type='scroll'` and `type='hover'`, the time in ms before scrollbars hide after the user stops interacting.

ScrollAreaScrollbar

Scrollbar

Prop	Type	Default	Description
`orientation`?	`'horizontal' \| 'vertical'`	`'vertical'`	—
`forceMount`?	`boolean`	—	Keep mounted regardless of visibility state.

ScrollAreaScrollbarAuto

ScrollbarAuto

Prop	Type	Default	Description
`orientation`?	`'horizontal' \| 'vertical'`	—	—
`forceMount`?	`boolean`	—	—

ScrollAreaScrollbarHover

ScrollbarHover

Prop	Type	Default	Description
`orientation`?	`'horizontal' \| 'vertical'`	—	—
`forceMount`?	`boolean`	—	—

ScrollAreaScrollbarImpl

ScrollbarImpl

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	—	—
`sizes`	`ScrollAreaSizes`	—	—
`hasThumb`	`boolean`	—	—

Emits

Event	Payload
`sizesChange`	`[sizes: ScrollAreaSizes]`
`wheelScroll`	`[event: WheelEvent, maxScroll: number]`
`dragScroll`	`[pointerPos: number]`
`thumbPositionChange`	`[]`
`registerScrollbar`	`[el: HTMLElement \| null]`

ScrollAreaScrollbarScroll

ScrollbarScroll

Prop	Type	Default	Description
`orientation`?	`'horizontal' \| 'vertical'`	—	—
`forceMount`?	`boolean`	—	—

ScrollAreaScrollbarVisible

ScrollbarVisible

No props or events — renders its element and forwards attributes.

ScrollAreaThumb

Thumb

No props or events — renders its element and forwards attributes.

ScrollAreaViewport

Viewport

Prop	Type	Default	Description
`nonce`?	`string`	—	Inline `nonce` attribute applied to the injected style tag (CSP support).