Scroll Area

The scroll area keeps long-form content within a fixed footprint so a dense block of text never pushes the rest of the layout around. The viewport clips the overflow and reveals a slim scrollbar only when it is needed.

Because the bar overlays the content rather than reserving its own column, the reading measure stays constant whether or not the region is scrollable. This avoids the subtle layout shift that plain overflow containers introduce.

Keyboard users can focus the viewport and move through the text with the arrow keys, page up and page down, exactly as they would with a native scrolling element. Pointer users get a draggable thumb on hover.

Drop any amount of prose inside and the component will take care of the rest, deriving the thumb size from the ratio between the visible viewport and the full content height.