ScrollArea

A scrolling area whose scrollbars are drawn over its content rather than beside it - so a rounded panel keeps its corner clean - and show only while the pointer is over the area or focus is inside it.

Accessibility

  • The native scrollbar is hidden; the drawn one is aria-hidden and a pointer aid only. The box underneath is native, so the wheel, touch and (with tabIndex={0}) the keyboard scroll it.
  • A scrolling box with nothing focusable in it should be in the tab order (tabIndex={0}) and named (aria-label), or a keyboard user cannot scroll it.
  • Server rendering: it renders the box and no bar; the bars are measured after mount.