[SOLVED] Custom scrollbar style for webkit browser

[Tim Curtis]

One issue is that there needs to be some way of preventing the media query for OS X otherwise it overrides the System preference setting:

"Show scroll bars" = "Automatically based on mouse or trackpad" i.e. overlay scroll bars.

[swizzle]

Looking at this a bit more, how useful do people find the quick-jump way index on desktop? Maybe we can trim that out as it’s mainly a mobile thing.

I too find this invaluable.
Don't know about the size of your collection @swizzle but without the quick-jump I'd be scrolling for ages trying to get to artists past C (and it's faster than using the search dialogue).

My collection is about 24k tracks. We kind of copped the concept from iOS where there weren’t draggable scrollbar thumbs, though that’s a fancier implementation that lets you swipe through the list. I sometimes use it to move to a general area of my collection but I tend to either use random to find something to listen to or search (which is always faster than scrolling and hunting).

So keeping it we should do something like:

#index-whatever {width:1em;...} (repeat for all indexes, we can maybe approximate though)
#albumcovers {width:calc(100% - (var(--sbw) + 1em)));margin-left:calc(var(--sbw) + 1em));...}

(the ellipsis represents the current rule set)

I think we’ll want to filter out macOS Safari from the new scrollbar appearance as it doesn’t need it, we may need to use js but there might be some clever css out there. I’ll have to charge up my pencil to see if the pointer directive applies it to iPad with that though it’s pretty obscure I’d think, I’m not sure if the new trackpad support on iOS qualifies but don’t have one to test.

ETA: no issue with Apple Pencil (as in it doesn’t trigger the media query)

[bitlab]

Hmm I don't have way to test OS X support.

If I understand it well you have system wide setting under OS X with one of the following values:
1. "Automatically based on mouse or trackpad" which enables system-wide overlay scroll bars results in no apparent change in scroll bar appearance.
2. "Always" results in the @media query having the desired effect. It's a vast improvement over the uglywhite bars.

You can detect/guess in js that you are running OS X, but I don't know if you can detect which setting is active(1 or 2).
So lets say that you detect OS X and leave the scrollbar mod off then if option two is active you will have still an ugly scrollbar.

[Tim Curtis]

Here's more detail on what happens on OS X.

1. OS X Scroll bars  = always on:
Media query N = Chrome shows White scroll bars, Safari shows same
Media query Y = Chrome shows media query scroll bars, Safari shows same

1. OS X Scroll bars = overlay scroll bars
Media query N = Chrome shows overlay scroll bars, Safari shows same
Media query Y = Chrome shows media query scroll bars, Safari shows same.

If we leave the media query in place then regardless of the OS X system setting scroll bars will always show which is not desirable thus we need a way to detect whether we are on OS X and then prevent the media query.

On other OS the media query will be beneficial since it replaces the ugly white scroll bars with something nicer :-)

Note the screen shot below that shows the difference in the bg color of the scroll thumbs.
   

[bitlab]

Found and easy way to enable the media query (thanks to https://stackoverflow.com/questions/3960...y/39611257)[url=https://stackoverflow.com/questions/39609789/can-i-change-the-media-query-using-javascript-jquery/39611257][/url]

Updated css:

Code:

@media (pointer: fine) {
   .noosx ::-webkit-scrollbar {
        width: 12px;
        -webkit-appearance:slider-vertical;
   }
   
   .noosx ::-webkit-scrollbar-track {
       -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
       border-radius: 10px;
   }
   
   .noosx ::-webkit-scrollbar-thumb {
       border-radius: 10px;
       -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
        background:rgba(var(--textvariant),0.25) !important;        
   }
}

Code required in js to enable it:

Code:

$("body").addClass("noosx")

Now only find a way to detect OS X in javascript.

[Tim Curtis]

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.

I think I'm going to play around with "navigator.appVersion" and see where that leads.

[grumbleweed]

Code:

window.navigator.platform

should return "MacIntel"

I cant test what it does on iOS.

Paul.

[Tim Curtis]

The other property that can be tested is navigator.platform.

I think the code block below should work. it would be placed in scripts-panels.js below the code block that tests for native lazy load.

Code:

   // Check for native lazy load support in Browser
   // @bitkeeper contribution: https://github.com/moode-player/moode/pull/131
   if ('loading' in HTMLImageElement.prototype) {
       GLOBAL.nativeLazyLoad = true;
   }

   // Determine whether on OS X or not. This is for enabling custom scroll bars on non-OSX desktop platforms.
   if (navigator.platform.toUpperCase().indexOf('MAC') == -1 && navigator.appVersion.toUpperCase().indexOf('OS X') == -1) {
       $("body").addClass("not-osx");
   }
   //console.log(navigator.platform, navigator.appVersion);

Heres the media query I'm testing.

Code:

/* Only normal monitors (pointer: fine) and not OS X since OS X has system-wide setting for overlay scroll bars */
@media (pointer: fine) {
   .not-osx ::-webkit-scrollbar {
       width: 10px;
   }

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

   .not-osx ::-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;
   }
}

[Tim Curtis]

Oops there was a / in front of @media

Removed via edit

[TheOldPresbyope]

This front-end stuff quickly becomes gobbledygook to me but here's a cute webpage I found to test navigator.platform on any browser on any platform:

https://jsfiddle.net/f6eNr

Chrome, Firefox, and Safari on my iPad 9.7 return "iPad".

Safari on my SO's iPhone 11 returns "iPhone".

Chrome and Firefox on my Linux Mint box return "Linux x86_64".

Chrome on my Google/Android Pixel 3a phone returns "Linux armv8l"

Firefox on my Google/Android Pixel 3a phone returns "Linux aarch64"

From a quick Internet search I infer some browsers in some OSes return strange results, but I gather all you want to check here is that it's not macOS.

Have fun.

Regards,
Kent