Thank you for your donation!


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


Solved: Custom scrollbar style for webkit browser
#31
I'll test it out.
Enjoy the Music!
moodeaudio.org | Mastodon Feed | GitHub
Reply
#32
(06-18-2020, 07:16 PM)swizzle Wrote: 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?
Enjoy the Music!
moodeaudio.org | Mastodon Feed | GitHub
Reply
#33
(06-18-2020, 10:58 PM)Tim Curtis Wrote:
(06-18-2020, 07:16 PM)swizzle Wrote: 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.
Reply
#34
Gotcha. I'll push the commit tonight.

Nice UI refinement :-) @bitlab @swizzle
Enjoy the Music!
moodeaudio.org | Mastodon Feed | GitHub
Reply
#35
All @bitlab on this one.  Smile
Reply
#36
Just happy to contribute to Moode Smile

Thanks
Reply


Forum Jump: