Scrollbars
Use a thin scrollbar with native scrolling and a visible focus outline.
Installation
One prompt for your coding agent to set up Reflow and use this system in Remix.
The problem
On platforms that hide native scrollbars until you scroll, a clipped list can look like it simply ends. Compare the same release notes with a custom thumb and a fade at the edge.
- v1.23.0 — maintenance release
- v1.22.0 — maintenance release
- v1.21.0 — maintenance release
- v1.20.0 — maintenance release
- v1.19.0 — maintenance release
- v1.18.0 — maintenance release
- v1.17.0 — maintenance release
- v1.16.0 — maintenance release
- v1.15.0 — maintenance release
- v1.14.0 — maintenance release
- v1.13.0 — maintenance release
- v1.12.0 — maintenance release
- v1.11.0 — maintenance release
- v1.10.0 — maintenance release
- v1.9.0 — maintenance release
- v1.8.0 — maintenance release
- v1.7.0 — maintenance release
- v1.6.0 — maintenance release
- v1.5.0 — maintenance release
- v1.4.0 — maintenance release
- v1.3.0 — maintenance release
- v1.2.0 — maintenance release
- v1.1.0 — maintenance release
- v1.0.0 — maintenance release
The scrollbar
The thumb rests narrow and low contrast, then widens when you reach for it. Scroll with a wheel or trackpad, drag the thumb, or use the keyboard. On touch-primary devices the component uses the platform’s native scrolling gestures.
The fade
A fade marks the edges with hidden content. At the true start or end, that edge clears.
Examples
Horizontal
A row of months is wider than its container. The fade marks the side with more content.
Double overflow
A table is taller and wider than its viewport. Set orientation="both" to expose both axes.
API reference
ScrollArea
| Property | Value | Purpose |
|---|---|---|
ScrollArea.orientation | vertical | horizontal | both | Visible scrollbar axes |
ScrollArea.fade | boolean | Fade content edges |
ScrollArea.viewportClassName | string | Style the native scrolling viewport |
.rf-scroll-area | CSS class | Native scroll container |
scrollFade.orientation | vertical | horizontal | both | Edges to fade |
scrollFade.distance | 20px | Maximum edge fade |
Coarse pointer | Native scrollbar | Retains platform gestures |