[SOLVED] Custom scrollbar style for webkit browser

[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?