ScrollArea

Bounded scroll container with a subtle top/bottom fade so the edges blend into the surrounding layout. Thin scrollbar, touch-friendly inertia.

Line 01 — keep scrolling, the wrapper handles the overflow.
Line 02 — keep scrolling, the wrapper handles the overflow.
Line 03 — keep scrolling, the wrapper handles the overflow.
Line 04 — keep scrolling, the wrapper handles the overflow.
Line 05 — keep scrolling, the wrapper handles the overflow.
Line 06 — keep scrolling, the wrapper handles the overflow.
Line 07 — keep scrolling, the wrapper handles the overflow.
Line 08 — keep scrolling, the wrapper handles the overflow.
Line 09 — keep scrolling, the wrapper handles the overflow.
Line 10 — keep scrolling, the wrapper handles the overflow.
Line 11 — keep scrolling, the wrapper handles the overflow.
Line 12 — keep scrolling, the wrapper handles the overflow.
Line 13 — keep scrolling, the wrapper handles the overflow.
Line 14 — keep scrolling, the wrapper handles the overflow.
Line 15 — keep scrolling, the wrapper handles the overflow.
Line 16 — keep scrolling, the wrapper handles the overflow.
Line 17 — keep scrolling, the wrapper handles the overflow.
Line 18 — keep scrolling, the wrapper handles the overflow.
Line 19 — keep scrolling, the wrapper handles the overflow.
Line 20 — keep scrolling, the wrapper handles the overflow.
Line 21 — keep scrolling, the wrapper handles the overflow.
Line 22 — keep scrolling, the wrapper handles the overflow.
Line 23 — keep scrolling, the wrapper handles the overflow.
Line 24 — keep scrolling, the wrapper handles the overflow.
Line 25 — keep scrolling, the wrapper handles the overflow.
Line 26 — keep scrolling, the wrapper handles the overflow.
Line 27 — keep scrolling, the wrapper handles the overflow.
Line 28 — keep scrolling, the wrapper handles the overflow.
Line 29 — keep scrolling, the wrapper handles the overflow.
Line 30 — keep scrolling, the wrapper handles the overflow.

Usage

import { ScrollArea } from '@bwo-ui/react';

<ScrollArea maxHeight={400}>
  {messages.map(m => <Message key={m.id} {...m} />)}
</ScrollArea>

<ScrollArea axis="x" maxWidth="100%">
  <Toolbar />
</ScrollArea>

Props

PropTypeDefaultDescription
axis'x' | 'y' | 'both' | 'auto''y'Axis allowed to scroll on overflow.
maxHeightnumber | string—Cap on height. Number → px.
maxWidthnumber | string—Cap on width.
fadebooleantrueRender a soft top/bottom mask gradient.