When Hidden Scrollbars Hide Content
A scrollbar is the most obvious sign that a page—or some element within it—can scroll. But scrollbars are increasingly rare. macOS hides them by default, revealing them only during an active scroll. And most mobile browsers won’t show them at all, even when you apply something like overflow: scroll;.
The problem is simple: if users can’t tell an area is scrollable, they may never discover content or functionality that sits below the fold. This isn’t a hypothetical annoyance. Tyler Hall’s Perfectly Cropped story is a well-known example of an iOS screen where important functionality requires scrolling, but no visual cue exists to suggest that scrolling is possible.
The result? Hall’s mother couldn’t find functionality she had used regularly. There was nothing on screen to tell her that more content was available.
Forcing Scrollbars Isn’t the Answer
One elaborate technique detects whether scrollbars are visible and forces them to be shown. But that approach has real downsides. It requires DOM manipulation tests, depends on vendor-prefixed CSS that may eventually disappear now that scrollbar styling has been standardized, and, most importantly, it overrides a user’s system-level preference rather than respecting it.
Shadows as Scroll Signals
A cleaner alternative is the shadow-based approach. An inset shadow makes content appear to flow underneath an edge, suggesting that more content follows in that direction. Because shadows are controlled entirely with CSS, they can easily be styled to fit whatever UI context they appear in.
The technique works without any JavaScript at all, making it one of those rare CSS-only solutions that solves a genuine UX problem.
