API and Development
Scrollable, ScrollableAxis, ScrollableScrollbarGutter and ScrollableScrollbarVisibility from @prepared911/ui/scrollable.
| Prop | Type | Notes |
|---|---|---|
axis | ScrollableAxis | Required. block, inline, or both. |
children | ReactNode | Main content. |
loadingRow | ReactNode | Optional row after children (document order). |
errorRow | ReactNode | Optional row after loadingRow. |
reverseOrder | boolean | Column-reverse content; pins to the live end when the reader is already there. |
insetShadow | boolean | Edge fades where more content lies beyond the scrollport. Default true. |
fadeInlineEdges | boolean | With axis="both", also fades inline edges when content overflows horizontally. Default false. |
fadeInlineStart | boolean | With inline fades on, fades the inline-start edge. Pass false for inline-end only. Default true. |
scrollbarHoldDurationToken | string | Chroma duration custom property for how long data-scrolling stays set after the last scroll. Omit for 900ms. |
scrollbarVisibility | ScrollableScrollbarVisibility | Hover (default) or Scroll. |
scrollbarGutter | ScrollableScrollbarGutter | Auto (default) leaves room for the block scrollbar only while the content overflows. Stable always keeps it (CSS scrollbar-gutter: stable), so two Scrollables with Stable keep the same content width. No effect with axis inline. |
startAtEnd | boolean | Mounts at the end of the scrolling axis and follows growth until the reader scrolls away. Default false. |
onEndReached | () => void | Fires when the end sentinel intersects. |
focusable | boolean | Makes the region a tab stop whenever it overflows, even when it holds focusable descendants. Requires scrollRegionLabel or aria-labelledby. Default false. |
scrollRegionLabel | LocalizedMessage | Names the region when it becomes focusable. Required with focusable unless aria-labelledby names it. |
ref | Ref<HTMLDivElement> | Scroll root. |
maxWidth | MaxInlineSize | Maximum inline size of the frame. |
maxHeight | MaxBlockSize | Maximum block size of the frame. |
div attributes pass through except style, tabIndex, className, layout props, and on* handlers.