0

I want to give a scrollbar style to a div but only on windows systems.

Most mobile devices have invisible scrollbars and I don't want to make them visible. Mac OS scrollbars are ahestetically ok to me, I just need to make the big gray scrollbars on windows more similar to those of Mac OS.

Is there a media query or other similar method to target only windows scrollbars for styling?

Claudio Bonifazi
  • 17
  • 6

2 Answers2

0

You can do this by Finding the platform they are on then using an if statement to create a stylesheet link

function getOS() {
    var userAgent = window.navigator.userAgent,
      platform = window.navigator.platform
      macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"],
      windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"],
      iosPlatforms = ["iPhone", "iPad", "iPod"],
      os = null;
  
    if (macosPlatforms.indexOf(platform) !== -1) {
      os = "Mac OS";
    } else if (iosPlatforms.indexOf(platform) !== -1) {
      os = "iOS";
    } else if (windowsPlatforms.indexOf(platform) !== -1) {
      os = "Windows";
    } else if (/Android/.test(userAgent)) {
      os = "Android";
    } else if (!os && /Linux/.test(platform)) {
      os = "Linux";
    }
  
    return os;
  }
  
  if (getOS() == "Windows") {
    var head = document.getElementsByTagName("HEAD")[0];
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = "scrollbar.css";
    head.appendChild(link);
}

note: Where it says scrollbar.css replace it with your CSS file name

Hope this helps.

Ash
  • 81
  • 9
-3

You Can Create a custom scroll bar using this css

<style>
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
</style>

I Hope it's Help you

Thanks

Hiren Devganiya
  • 353
  • 1
  • 8
  • Thank you but I already know how to do this, what I need is for this to make effect only if I'm in Windows, not for Mac OS or mobile – Claudio Bonifazi Feb 25 '21 at 11:20