[css-scrollbars] Force render scrollbar thumb of overlay scrollbars

[bramus]

One thing that was possible to do with ::-webkit-scrollbar-* is to create the illusion of having a scrollbar that only shows on hover.

See this demo which uses the following CSS:

.scroller {
    background: aliceblue;

    /* Hide scrollbar by default */
    &::-webkit-scrollbar-track {
        background: aliceblue; /* Same as content */
    }
    &::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 9999px;
    }

    /* Show thumb on hover */
    &:hover::-webkit-scrollbar-thumb {
        background: rgb(0 0 255 / 0.35);
    }
}

The scrollbar is “hidden” by giving it the same color as the scroller’s background. On hover, the thumb is then given a forced color. This gives the effect of a scrollbar that only gets shown on hover.

---

With scrollbar-color and scrollbar-width being the standardized way to color scrollbars this is no longer possible when having overlay scrollbars.

See this demo, which uses this CSS:

.scroller {
    background: aliceblue;

    scrollbar-color: aliceblue aliceblue;
    scrollbar-width: normal;

    &:hover {
        scrollbar-color: rgb(0 0 255 / 0.35) aliceblue;
    }
}

While the thumb’s color does become rgb(0 0 255 / 0.35), it does not become visible on hover. This because of the way overlay scrollbars work (at least on macOS, which I’m using): the thumb only gets drawn when there is some scrolling actively going on (+ some timeout afterwards).

For classic scrollbars this is no problem, as those are always drawn.

I would like to see the ability to show a scrollbar’s thumb on hover for overlay scrollbars restored.

[bramus]

I’m currently thinking of introduce something like scrollbar-render-thumb: forced; to force render the thumb. The initial value would be auto.

Maybe scrollbar-width could even become a shorthand so that it also includes scrollbar-render-thumb, e.g. scrollbar-width: normal forced.

[argyleink]

This is the biggest bummer of overlay auto hiding scrollbars, that the scroll area doesn't provide a hint it's scrollable until you try. As designers we try to ensure things are properly cutoff to provide this hint, or employ scroll hints via shadows, etc. But with scrollbar-* not offering a way forward to employ this hint, it would be nice to have a sanctioned way forward that doesn't feel hacky and does the right thing with a one liner. Thanks for logging this Bramus!

[argyleink]

Examples from the wild:

• https://codepen.io/graup/pen/xBQNRB
• https://css-tricks.com/scrollbars-on-hover/
• https://gist.github.com/IceCreamYou/cd517596e5847a88e2bb0a091da43fb4
• https://stackoverflow.com/questions/8631799/make-scrollbars-only-visible-when-a-div-is-hovered-over
• Roman Komarov https://codepen.io/kizu/pen/OyzGXY
• Ben Nadel https://www.bennadel.com/blog/3864-copying-slacks-brilliant-virtual-scrollbar-and-overflow-container-in-angular-9-1-12.htm

[softworkz]

Cross-linking #9785 which also is about the scrollbar hover effect.

I don't really think that this is related to the other issue (except that it's something about hover). Isn't this not rather a matter of platform-speific browser behavior?

[bramus]

Received some author feedback (both in-person as through socials) requesting the proposed behavior:

E.g. https://x.com/diegonoxvo/status/1758187884069171249?s=20

How can I use scrollbar-width and scrollbar-color and always show the scrollbars? The only way I found was to remove the new properties completely and only use the old ones :S

[frivoal]

This is the biggest bummer of overlay auto hiding scrollbars, that the scroll area doesn't provide a hint it's scrollable until you try.

I agree, that that is why I dislike them. But is it really something site authors should try to address site by site, or is it within the realm of what OS vendors / UA vendors can tweak to provide a good experience to their users? And sometimes they're not that good, but you fix that by changing settings or changing vendors?