Thank you for your donation!


Cloudsmith graciously provides open-source package management and distribution for our project.


Solved: Custom scrollbar style for webkit browser
#21
(06-17-2020, 11:58 AM)Tim Curtis Wrote: Cool, there should be some way in JS to reliably detect OS X but in the event it's problematic I can always add an explicit Appearance option to enable/disable the class.

It turns out to be a little more complicated... If we just detect macOS then the always on scrollbars setting will show the ugly white scrollbars. I don't personally know anyone who uses that, but I didn't think anybody would use the quick jump index on desktop either.

So we can do something like this which hides the scroll track unless it's hovered (this also removes the shading on the thumb, adds a transparent border to give it some padding, sets a min-height so it doesn't get quite so small which I always find annoying, and reduces shading on the track a bit).

Code:
@media (pointer: fine) {
        
         .newscroll::-webkit-scrollbar {
            width: 12px;
        }

        .newscroll::-webkit-scrollbar-track:hover {
        background:var(--btnshade);
        -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
            border-radius: 10px;
        }

        .newscroll::-webkit-scrollbar-thumb {
            border-radius: 10px;
            /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);*/
            background-color: var(--btnshade4);
        border:1px solid rgba(0,0,0,0);
        background-clip: padding-box;
        min-height:1.5em;
        }
}

I played around a little with adding a scroll handler to the div to show the scrollbar only when it scrolls like on the Mac but that might be confusing for some of our users and it's kind of messy because you need to do add a timeout function and do that for every div you want it to happen on... I'm the last person to advocate more prefs, but unless we can find a way to discover the macOS scroll style it'd probably be better to just have an option to turn the new style scrollbars on/off and that'd cover people who want the old ones in spite of the ugly.
Reply


Messages In This Thread
RE: Custom scrollbar style for webkit browser - by swizzle - 06-17-2020, 07:09 PM

Forum Jump: