Props

Prop	Type	Default	Description
enabled	boolean	true	Whether the subtree uses custom scrollbars. When false, the subtree is not initialized and any scrollbars already attached are destroyed. In nested providers the inner one wins.
autoHide	'never' | 'scroll' | 'leave' | 'move'	'scroll'	When the scrollbar hides. never keeps it visible, scroll shows it while scrolling, leave hides it after the pointer leaves, move shows it while the pointer moves.
autoHideDelay	number	800	Milliseconds to wait before auto-hiding.
options	ScrollbarsOptions	—	Options passed to OverlayScrollbars (PartialOptions). Deep-merged last, so it has the highest priority.

Slots

Slot	Description
default	Content that uses the custom scrollbars.

Exports

Export	Type	Description
useScrollbars	(target: MaybeRefOrGetter<HTMLElement | null | undefined>, options?: UseScrollbarsOptions) => UseScrollbarsResult	Attaches the custom scrollbar to a scroll container you wrote yourself. Does nothing without a ScrollbarsProvider above it. The container is the viewport and its children are not moved. Call it in a descendant of the provider.
UseScrollbarsOptions	{ enabled?: MaybeRefOrGetter<boolean> }	Second argument of useScrollbars. enabled defaults to true and controls whether this container uses it. If the outer provider is off, true has no effect.
UseScrollbarsResult	{ active: Readonly<Ref<boolean>> }	active tells you whether the custom scrollbar is attached to the element right now.
ScrollbarsProviderProps	Type	The type behind the props table above.
ScrollbarsProviderSlots	Type	The type behind the slots table above.
ScrollbarsOptions	PartialOptions	OverlayScrollbars option type, used by the options prop.
ScrollbarsAutoHide	'never' | 'scroll' | 'leave' | 'move'	Value type of autoHide.
ScrollbarsContext	Type	What the provider gives its subtree: enabled, the merged options, and mount.
ScrollbarsHandle	{ update, destroy }	The handle mount returns, used to update options or destroy the scrollbar.
scrollbarsKey	InjectionKey<ScrollbarsContext>	The injection key the provider uses.

Appearance variables

Variable	Default	Description
--astryx-scrollbar-size	10px	Scrollbar thickness.
--astryx-scrollbar-thumb	Secondary text color at 45%	Thumb color.
--astryx-scrollbar-thumb-hover	Secondary text color at 70%	Thumb color on hover and drag.
--astryx-scrollbar-track	transparent	Track background.
--astryx-scrollbar-radius	9999px	Corner radius of track and thumb.

Native attributes

The component renders no element of its own, so class and style are not forwarded.