Javascript

Flashing hidden scrollbars

Once I was designing a scrollable list, and I noticed a little design detail that I haven’t seen addressed before on the web.

Since 10.7, macOS has had hidden scrollbars by default. It’s something that feels nice to the eye, specially when using a trackpad. But it doesn’t come without disadvantages.

On a Mac, hidden scrollbars appear while scrolling, or when the user moves the pointer towards the corner of the scrollable view. On newer Windows apps, scrollbars are also visible when the pointer is hovering any part of the view.

But mainly, in order to help users get a sense of what can be scrollable or not, hidden scrollbars will flash for a brief moment when the view appears. It works as a reminder: “Hey, look at this, there’s more if you scroll. Good bye.”

On AppKit, NSScrollview also implements flashScrollers:

“This method can be invoked to cause the overlay scroller knobs to be momentarily shown. This may be desirable when changing a document view's size or swapping new content into the view, or to give the user a sense of the current position within the scrollable range at each step of an incremental search or similar operation.”
NSScrollview / flashScrollers

Browsers, however, haven’t implemented this flashing behavior. Far from OS particularities, HTML elements with overflow properties don’t inform the user which area is scrollable or not until they try scrolling. Even the over effect is missing. The experience is generally degraded. User may have a hard time noticing there’s more to see if they scroll.

I wanted to see how this could be fixed, so I made a proof of concept to indirectly ask the system to flash its hidden scrollbars. The solution I found doesn’t affect systems that have regular scrollbars, and it doesn’t rely on custom scrollbars of any sort.

While I don’t transform this into a JS library, here’s a codepen showing it live. Obviously, the result is only visible if your system uses hidden scrollbars.