Parameters

Name	Type	Default	Description
options	UseScrollableAreaOptions	—	Logical scroll intent, overscroll policy, and Sticky containment.
options.axis	'inline' | 'block' | 'both'	'block'	Which logical axis may scroll.
options.keyboardAccess	ScrollKeyboardAccess	{ owner: 'viewport', label, role }	Where the keyboard enters a scrolling area. { owner: 'content' }: the content has its own focusable cells, so the viewport stays out of the Tab order and unnamed. { owner: 'viewport', label, role? }: the viewport becomes a Tab stop while it scrolls. { owner: 'contentOrViewport', label, role? }: the same, but a Tab into it hands focus straight to a plain leading button or link inside; arrow-key scrolling stays with the browser.
options.label	string	—	Accessible name for the viewport. Used when keyboardAccess is not given.
options.role	'group' | 'region'	'group'	Role of the viewport.
options.overscroll	'allow' | 'contain'	'allow'	Overscroll policy for an axis that is actually scrollable.
options.stickyContainment	'whenScrollable' | 'always'	'whenScrollable'	Whether the viewport is a Sticky containing block only while it scrolls, or in every state.

Returns

Name	Type	Description
viewport	(element: unknown) => void	Function ref for the viewport element. It attaches the scroll listener and the ResizeObserver.
content	Ref<HTMLElement | null>	Template ref for the content box. Its size changes are observed too.
viewportAttrs	ComputedRef<Record<string, string | number | undefined>>	role, aria-label, tabindex, and the data-scroll-* attributes for the current measurement.
viewportStyle	ComputedRef<CSSProperties>	overflow for both axes, plus overscroll-behavior for the requested axes.
state	ComputedRef<ScrollableAreaState>	inline and block, each with isScrollable, atStart, and atEnd.