Scrollable

Use Scrollable when a region needs overflow scrolling with edge fades, a scrollbar that shows while scrolling, optional reverse-order chat layout, and intersection-based end detection. Pass axis explicitly (block, inline, or both). Compose loadingRow and errorRow as sibling nodes inside the scrollport, not as boolean props. Cap the frame with maxWidth and maxHeight from the Box size scale instead of wrapping Scrollable in a Box only to set a max size. When content can overflow and there are no focusable descendants inside, provide scrollRegionLabel so keyboard users get a named region. Without focusable, the region becomes a tab stop only when it overflows and holds no focusable descendants. Pass focusable when a reader must scroll the region from the keyboard before reaching the controls inside it, such as a long list whose first control is far down. The region is then a tab stop whenever it overflows, named by scrollRegionLabel or by visible text through aria-labelledby; the type requires one of them. When nothing overflows it is not a tab stop. There is no tabIndex prop. Pass scrollbarGutter={ScrollableScrollbarGutter.Stable} to keep room for the block scrollbar whether or not the content overflows. Give the same value to a Scrollable that sits above or beside a scrolling list, such as a pinned tier above the list, and both keep the same content width, so their columns line up without measuring the scrollbar. Where Scrollable draws its overlay thumb, the native scrollbar takes no width, so neither reserves anything and they still line up. Stable has no effect with axis inline. The scroller fades the edges that have more content beyond them. Each fade grows from nothing to 28px with the distance scrolled, and it is a mask, so it works over any background. Pass insetShadow={false} for a plain scroller. While a fade is on, the scroller reserves its 28px as scroll padding, so focus and scrollIntoView bring a control clear of it. A sticky TableHeader or sticky Navbar inside a Scrollable registers with it. The scroller keeps the part's block size, plus its sticky inset, in scroll-padding-block-start, so a row or control that focus brings into view is never under it. Nothing to set at the call site. Pass scrollbarVisibility={ScrollableScrollbarVisibility.Scroll} for a scrollbar that appears only while the content scrolls and fades out about 900ms after the last scroll. In the default Hover mode the native scrollbar shows on hover, on focus within, and while the content scrolls. For a fine pointer that can hover, a thin overlay thumb replaces it and takes no layout width. Touch and forced colors keep the platform scrollbar. The scrolling axis uses overscroll-behavior: contain, so a scroll that reaches the end of a Dialog or Drawer body does not scroll the page behind it. axis picks the only axis that scrolls; the other axis is hidden. startAtEnd mounts the scroller at the end of its axis and follows new content while the reader stays there. For a feed that loads older items at the start, use reverseOrder with onEndReached. loadingRow and errorRow render after the children and pause onEndReached while they are present.