Scroll fade
A scroll box whose edges fade only where there is more to scroll, and stay crisp at either end.
Line 1 of a list taller than its box.
Line 2 of a list taller than its box.
Line 3 of a list taller than its box.
Line 4 of a list taller than its box.
Line 5 of a list taller than its box.
Line 6 of a list taller than its box.
Line 7 of a list taller than its box.
Line 8 of a list taller than its box.
Line 9 of a list taller than its box.
Line 10 of a list taller than its box.
Line 11 of a list taller than its box.
Line 12 of a list taller than its box.
Line 13 of a list taller than its box.
Line 14 of a list taller than its box.
Features
- The edges fade with a mask only where there is more to scroll.
- Two data attributes set on scroll and resize; the fade is CSS.
- Vertical or horizontal.
Use it for
- Long lists in a fixed height.
- A row of chips that scrolls sideways.
On this site
- Working on: the listThe list fades only where there is more of it.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
API
| Prop | Type | What it does |
|---|---|---|
horizontal | boolean | Scroll sideways instead. |
…rest | HTML attributes | Passed to the scroll box. |
Accessibility
- A plain scroll box; nothing is hidden from assistive tech.
Source
The code is in src/kit/scroll-fade.tsx in runets, MIT licensed.