useScrollableArea@astryxdesign/core v0.6.1 · useScrollableArea

Usage

Adds canonical axis-aware scroll behavior to structure owned by the caller. An axis is effective only when its computed overflow is scroll-capable and geometry exceeds the shared 1px tolerance. Both viewport and content boxes are observed.

ts
import {useScrollableArea} from '@astryxdesign/core/hooks'

Best practices

GuidancePractices
Do

Pass already-resolved props and refs through both prop getters, then spread each returned object once.

Do

Use viewport keyboard ownership only when the viewport itself should enter the tab order; provide a concise accessible label.

Do

Use content keyboard ownership when an existing focusable descendant gives keyboard users access to all overflowed content.

Do

Pass caller xstyle through getViewportProps; the getter composes it with fitting clip, active overflow, and Sticky containment.

Don't

Attach only the viewport getter. A real observed content box is required for live overflow changes.

Parameters

ParamTypeDescription
optionsrequired

Logical scroll intent, keyboard owner, overscroll policy, and fitting Sticky containment.

Returns

FieldTypeDescription
getViewportProps<E extends HTMLElement>(props?: ScrollableElementProps<E>) => ScrollableElementProps<E>

Consumes caller viewport props, xstyle, and refs; composes fitting/active overflow, Sticky containment, accessibility, chaining, and owner registration.

getContentProps<E extends HTMLElement>(props?: ScrollableElementProps<E>) => ScrollableElementProps<E>

Composes caller content-box props and refs with content observation.

state

Stable inline and block effective-scroll and logical-edge state.