Scrollable Area Props

Name	Type	Default	Description
axis	'inline' | 'block' | 'both'	'block'	Logical axes that may scroll. The physical axis follows writing mode and direction.
label	string	-	Accessible name. Required. The viewport enters the tab order only while an axis overflows.
role	'group' | 'region'	'group'	Role of the named viewport.
overscroll	'allow' | 'contain'	'allow'	Whether a gesture at the edge continues into an ancestor. Containment applies only while that axis overflows.
stickyContainment	'whenScrollable' | 'always'	'whenScrollable'	whenScrollable passes sticky ownership outward when the content fits. always keeps this viewport as the sticky boundary.
padding	SpacingStep	0	Content padding on every edge.
paddingInline	SpacingStep	-	Inline-axis content padding. Overrides padding on that axis.
paddingInlineStart	SpacingStep	-	Inline-start content padding.
paddingInlineEnd	SpacingStep	-	Inline-end content padding.
paddingBlock	SpacingStep	-	Block-axis content padding. Overrides padding on that axis.
paddingBlockStart	SpacingStep	-	Block-start content padding.
paddingBlockEnd	SpacingStep	-	Block-end content padding.
isFullBleed	boolean	false	Lets the viewport escape an ancestor's padding. Content padding stays as set.
scrollbars	boolean	true	Whether this area uses the custom scrollbar when a ScrollbarsProvider is above it. Set false to keep the native scrollbar.
width	number | string	-	Viewport width. Numbers are pixels, strings are used as they are.
height	number | string	-	Viewport height. Numbers are pixels, strings are used as they are.
maxWidth	number | string	-	Maximum viewport width.
minHeight	number | string	-	Minimum viewport height.

SpacingStep accepts 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10.

Slots

Name	Description
default	Content inside the observed content box. Inline and both-axis modes size that box with max-content on the inline axis.

useScrollableArea

Import it from @astryx-vue/core when a component already owns the viewport and the content box. Options are axis, label, role, overscroll, and stickyContainment. It returns viewport (a callback ref), content, viewportAttrs, viewportStyle, and state.

Overflow uses a 1px tolerance. Before a measurement, a requested axis is overflow: clip. Afterward, an overflowing axis is auto.

useScrollOverflow

useScrollOverflow() watches one horizontal scroller. Bind scrollRef to the element. overflowStart, overflowEnd, and hasOverflow are refs. The tolerance is 1px.

Native attributes

ScrollableArea renders a <div>.

The following go to the viewport:

• HTML attributes.
• aria-* attributes.
• data-* attributes.
• class.
• style.

class is merged. The viewport also sets data-scroll-axis and, once measured, data-scrollable-* and data-scroll-*-start / data-scroll-*-end.