[SOLVED] Custom scrollbar style for webkit browser

[swizzle]

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.

[Tim Curtis]

I could do an Appearance option but given there is already an OS X option to turn on overlay scroll bars it would seem to be redundant?

It's strange that overlay scroll bars aren't the default for all platforms.

[grumbleweed]

Swizzle, I'm sure I'm of the same opnion as others who use a sizable screen, tablet or desktop, to control MoOde; the album cover index is a great link shortcut menu.

Personally, I think the index gutters are the best things added to the UI, after cover view,

Paul.

[swizzle]

I could do an Appearance option but given there is already an OS X option to turn on overlay scroll bars it would seem to be redundant?

It's strange that overlay scroll bars aren't the default for all platforms.

If you set the scrollbars to always show on the Mac though they’ll be white without the css. If the css is applied then it overrides the overlay ones. Thinking about it now though we can just test if it’s a Mac and if sbw > 0 then scrollbars are set to always show so we should apply the css.

[Tim Curtis]

We could do that logic but don't u think most Mac users turn on overlay scroll bars right after first boot?

[swizzle]

We could do that logic but don't u think most Mac users turn on overlay scroll bars right after first boot?

I think show only when scrolling is the default, but we should eradicate all white scrollbars where possible and this actually simplifies things. Since we want to apply the new css to all browsers if they show a scrollbar we can skip the browser sniffing and just do like...

Code:

if (sbw) {$('body').addClass('scrolly');}

... in scripts panels right after it sniffs the scrollbar width.

[bitlab]

hmm just a simple css mod ahum ;-)

The defaults of Firefox looks already much better then the defaults of Chrome.
Firefox uses a draft w3c standard for scrollbar css, which is very limited (only 2 props for now).

If we add the following also to the media query, Firefox will also look a little bit more like the other one:

Code:

    * {
        whatever_prefix_class_we_use scrollbar-width: thin;
        whatever_prefix_class_we_use scrollbar-color: auto;
    }

This will result in thin scrollbar, without the top/bottom arrows. Where the track background is almost transparant and thumb depends on the average available color.


ps If in allmost all cases the scrollbar css is useful, maybe the js code should also express this by handling the expection (osx with the automatic scrollbar) by removing the class instead of adding:

Code:

$("body").removeClass("whatever_prefix_class_we_use");

[Tim Curtis]

The sbw approach is doable.

@bitlab, for the Firefox case do you mean like below?

Code:

/* Use custom scroll bars for desktop monitors */
@media (pointer: fine) {
   .custom-scrollbars ::-webkit-scrollbar {
       width: 10px;
   }

   .custom-scrollbars ::-webkit-scrollbar-track {
       -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.25);
       border-radius: 10px;
   }

   .custom-scrollbars ::-webkit-scrollbar-thumb {
       border-radius: 10px;
       -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.25);
       background-color: var(--textvariant);
        opacity:.25;
   }

    /* Firefox */
    * {
        .custom-scrollbars scrollbar-width: thin;
        .custom-scrollbars scrollbar-color: auto;
    }
}

[bitlab]

@Tim Curtis, perfect!

[swizzle]

After playing around some with the native macOS implementation (on Mojave anyway) I'm half tempted to just say use the css scrollbars for all because when you hover the thumb on the native ones it shows (when it works...) ugly white scrollbars. Anyway this is my current css...

Code:

@media (pointer: fine) {
   .scroll ::-webkit-scrollbar {
    width: 11px;
   }
   .scroll ::-webkit-scrollbar-track:hover {
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
       border-radius: 6px;
   }
   .scroll ::-webkit-scrollbar-thumb {
       border-radius: 6px;
       background-color: var(--btnshade2);
    border:2px solid rgba(0,0,0,0);
    background-clip: padding-box;
    min-height:1.5em;
   }
   .scroll ::-webkit-scrollbar-thumb:active {
    background-color:var(--textvariant);
   }    
}

This adds an active color to the thumb when it's clicked/held and changes the track effect back more to the original which is more subtle and works better across the range of themes.

We'd only add/remove the class once on load so it doesn't really make a difference in performance either way but I'm partial to adding a class to add a feature rather than removing one to remove it as it feels more logical but... /spock