CSS scrollbar-width: keep scrolling discoverable

When to use it

A narrow audit side panel has many records. A thin scrollbar can save a little inline space, but the control must remain visible enough to suggest more content, especially for mouse users who do not know the panel scrolls. The sample keeps overflow auto and applies thin only to that panel. Test classic and overlay scrollbar systems, touch, keyboard page scrolling, and forced colors. Do not set scrollbar-width none merely for a clean screenshot; it can make a second scroll region difficult to discover. If the panel needs more space, first inspect whether a better layout or wider container would solve the problem without altering a system affordance.

.audit-side-panel { max-block-size: 32rem; overflow-y: auto; scrollbar-width: thin; }

Cost and verification

The style is inexpensive, but smaller targets can be harder to use. Browser and operating-system settings may override appearance, so never rely on an exact pixel width in a layout calculation. A thin scrollbar does not provide a focus cue for items inside the panel. Keep the region keyboard reachable and make clipped content discoverable with visible structure or an explicit label. Validate at zoom and with long localized row names. If user testing finds the thin affordance difficult, return to auto rather than forcing a custom scrollbar design.

Common Mistakes

• Do not hide a scrollbar merely to improve a screenshot.
• Do not assume a fixed physical width across browsers.
• Do not trade away a usable pointer target to gain a few pixels.

Connected lessons

• CSS Property Decisions
• CSS scrollbar-gutter: reserve space when a panel starts scrolling
• CSS overflow: contain long data without losing controls
• CSS data tables: preserve headers when columns get narrow