Scroller

Navigation · src/components/Scroller/Scroller.tsx

A scrollable area with faded edges, so it is visible that there is more.

The viewport carries a tabIndex of 0 by default, and that is not decoration: without it somebody using only a keyboard cannot scroll the region at all, because there is nothing inside to focus that would bring the rest into view.

role="region" is applied only when label is given. An unnamed region adds a landmark a screen reader has to announce and cannot describe, which is worse than no landmark.

Import

import { Scroller } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
axis	'x' | 'y'
size	'default' | 'thin'	thin for a dense panel.
tone	'default' | 'inverse'
gutter	'auto' | 'stable'	auto reserves gutter space only when a scrollbar is actually there.
fade	boolean	false removes the fade at the scrollable edges.
fadeSize	number | string
background	string	Colour the fade blends into. Set it when the scroller sits on a non-default ground.
maxHeight	number | string
height	number | string
label	string	Names the region. Without it there is no region role, because an unnamed one is noise.
focusable	boolean	false drops the tabindex. Only for a scroller whose content is already reachable.
className	string
style	React.CSSProperties
children	React.ReactNode
onScroll	(event: React.UIEvent<HTMLDivElement>) => void