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
Best practices
| Guidance | Practices |
|---|---|
| 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 |
| Don't | Attach only the viewport getter. A real observed content box is required for live overflow changes. |
Parameters
| Param | Type | Description |
|---|---|---|
optionsrequired | Logical scroll intent, keyboard owner, overscroll policy, and fitting Sticky containment. |
Returns
| Field | Type | Description |
|---|---|---|
| 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. |
Use with shadcn
Already using the shadcn registry workflow? Install the real Astryx package and a local public re-export. Component implementation source stays in Astryx. How compatibility works.
This install URL expires with the draft preview.bash