3

Is there a way to differentiate between styling scrollbars on windows and on mac?

On mac scrollbars looks nice, but on windows look like a crap.

I tried to use:

::-webkit-scrollbar {
   width: 10px;
   background: blue;
}

But it also affects the nice scrollbar on mac. I dont want it to affect the mac's scrollbar, only this crappy one on windows. Is it possible?

Patrickkx
  • 1,740
  • 7
  • 31
  • 60
  • Only way I know of would be something based on the user agent. You could do this server-side, or you could do it client side by checking `navigator.userAgent`. For example you could add a class to your style, and only add that class to the body tag if the user agent matches windows. – David784 Apr 07 '20 at 23:07
  • Are you using the same browser on each operating-system? What browser and what versions of Windows & macOS are you using? – admcfajn Apr 07 '20 at 23:28
  • Please look to my solution – Elman Huseynov Apr 08 '20 at 22:44

1 Answers1

3

1 way of doing it is to detect if the user uses not mac device, if yes, add an additional class to the element where you have a scroll that will apply that features. Besides, do not forget to replace IN CSS ".element" with your block where you have the scrollbar.

Example:

function custom_scrollbar(){

   var mac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
        
    if (mac) return;

   document.getElementById("ELEMENT BLOCK WITH SCROLLBAR HERE").classList.add("edited_scrollbar");
      }

custom_scrollbar();


    
.element.edited_scrollbar::-webkit-scrollbar {
   //Scrollbar properties here.
   
}
Elman Huseynov
  • 1,127
  • 1
  • 8
  • 18
  • Its nice but I'd prefer a pure css solution:( – Patrickkx Apr 10 '20 at 02:15
  • @Patrickkx, unfortunately, there is no perfect solution to detect scroll on mac only yet – Elman Huseynov Apr 10 '20 at 16:15
  • I used the next function to detect the user OS, added it as an HTML attribute e.g. `` and then I just used pure CSS to design the scrollbar only for windows users e.g. `html[os="windows"] body.....` . https://stackoverflow.com/a/38241481/469161 – Roy Shoa Jun 22 '22 at 10:45