Scrollbars on Hover | CSS-Tricks

Initially, scrollbars are a functionality and availability thing. Second, a general rule: if a location scrolls, it must have a noticeable scrollbar. However the web is a huge location and I like techniques, so I’m going to cover the concept of just exposing them on hover. Even macOS itself ¹ hides scrollbars by default, exposing them contextually and on interaction. Very same on iOS, causing puzzling momements.

All that aside, here’s a method to conceal scrollbars by default, just exposing them when the aspect is hovered. It was developed by Thomas Gladdines, who likewise emailed me about it:

In fast screening on my device, it works throughout Chrome, Firefox, and Safari, no matter my macOS settings. So quite robust.

The technique is that mask covers the scrollbar! So, if you produce a mask that is precisely as broad as the scrollbar (here, I’m simply thinking that 17px will cover it) and very duper high (both of which need to most likely be determined by a script), it can completely cover the scrollbar. You can even shift the position of the mask, fabricating a fading in/out impact. Extremely smart.

Especially, this is the genuine scrollbar of the aspect, and not a fabricated one. Fabricating one might be another technique. Ben Nadel covered how Slack does that. Their technique is to require the scrollbar to render in a location concealed by overflow, and make a virtual scrollbar that imitates the native one (which you ‘d then have more direct control over). It’s not requiring the scrollbar either, which is something else you can do if so inspired. And absolutely nothing about this avoids you from styling the scrollbar, which may in fact have some advantages like defining the specific width of it.