How to build an accessible ScrollArea in React

Native overflow keeps the container keyboard-scrollable and focusable per browser defaults; styling never removes the scroll affordance, only restyles it

When to use a ScrollArea

• Constraining a region to a fixed height/width with overflow scrolling
• Giving long lists, tables, or code blocks consistent slim scrollbars across browsers
• Signalling more content with subtle top/bottom scroll shadows

When not to use it

• Whole-page scrolling — let the document scroll naturally
• Content that should determine its own height — do not cap it

Keyboard interactions

Role none, verified at WCAG 2.2-AA.

• ArrowUp
• ArrowDown
• PageUp
• PageDown
• Home
• End

Common mistakes

Avoid: Nesting many ScrollAreas so the user faces competing scrollbars

Prefer: Scroll one region; let the rest size to content

Nested scroll regions trap focus and confuse pointer and keyboard scrolling

Example

<ScrollArea height="12rem">
  <p>Long content…</p>
</ScrollArea>

See the full ScrollArea reference →