Scrollbars
A scrollbar drawn from the tokens, so it does not sit as a bright grey stripe on the dark ground. Styled, never replaced — the real one keeps its keyboard, its wheel and its drag.
Thin
for a panel inside a card
Sideways
the same treatment on a wide table
| Account | Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep |
|---|---|---|---|---|---|---|---|---|---|
| Sales | 42.1k | 38.9k | 51.3k | 44.7k | 47.2k | 49.8k | 46.0k | 52.4k | 48.6k |
| Services | 11.2k | 12.0k | 10.4k | 13.1k | 12.8k | 11.9k | 14.2k | 13.0k | 12.6k |
| Salaries | 17.9k | 17.9k | 17.9k | 17.9k | 17.9k | 17.9k | 17.9k | 17.9k | 17.9k |
| Rent | 8.0k | 8.0k | 8.0k | 8.0k | 8.0k | 8.0k | 8.0k | 8.0k | 8.0k |
Left alone
the page's own scrollbar
This box uses whatever the browser gives it. On a Mac the scrollbar is not even drawn until you scroll; on Windows it takes up real width and always shows.
Coffer styles the colour and the width and stops there. Replacing a scrollbar with two divs and a drag handler loses the wheel, the arrow keys, Page Up and Page Down, the middle-click drag, and the trackpad's momentum — all of which people use without thinking about them.
The styling uses ::-webkit-scrollbar for Chrome, Edge and Safari and scrollbar-width and scrollbar-color for Firefox. Where neither is honoured the scrollbar is simply the browser's own, which is a perfectly good outcome.
Scroll this box on both grounds. The thumb takes its colour from the tokens, so it darkens with the rest of the page rather than staying a light grey stripe.
Where it goes wrong
- A hidden scrollbar hides that there is more. If a panel scrolls, something has to say so.
- A scrollbar thinner than about 8px is hard to hit for anyone whose hands are not steady.
- A thumb with too little contrast disappears on the dark ground, which is exactly where people need it most.