[SOLVED] Custom scrollbar style for webkit browser

[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;
   }
}