[SOLVED] Custom scrollbar style for webkit browser

[Tim Curtis]

I'll test it out.

[Tim Curtis]

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

These scroll bars look pretty neat :-)

We turn them on if sbw > 0 otherwise for sbw = 0 (overlay scroll bars) we leave them off right?

[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

These scroll bars look pretty neat :-)

We turn them on if sbw > 0 otherwise for sbw = 0 (overlay scroll bars) we leave them off right?

Right, we just need to test sbw and apply the css if it’s true. I also tried this (before the css var is set):

sbw ? $( 'body').addClass('scroll') : sbw = 11;

Which shifts the indexes over so the native scrollbar isn’t actually overlaying anything and the thumb is easier to drag but in the end figured that kind of defeats the point.

[Tim Curtis]

Gotcha. I'll push the commit tonight.

Nice UI refinement :-) @bitlab @swizzle

[swizzle]

All @bitlab on this one.  

[bitlab]

Just happy to contribute to Moode

Thanks