Home/ Questions/Q 8941505
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T11:19:09+00:00

I am building a website that requires heavy customization and i also want to

  • 0

I am building a website that requires heavy customization and i also want to customize the want the scrollbar looks (ie: color, width, style, etc).
I currently have no idea on what to do.

Honestly, I’m working on a group project chrome experiment and i have not tried anything yet.
Any solution even for chrome only will help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    IE has supported this through IE propriatary non-standard CSS attributes such as: 

    scrollbar-base-color
scrollbar-face-color
scrollbar-track-color
scrollbar-3dlight-color
scrollbar-highlight-color
scrollbar-arrow-color
scrollbar-darkshadow-color
scrollbar-shadow-color

    WebKit (Chrome and Safari) also support this using:

    ::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer

    What’s pretty cool about WebKit is scrollbars can have an opacity, which makes for some pretty nice looking UI.

    To my knowledge, there’s no standard Mozilla way to support this (though there is an open bug on this so we can hope!) There are, however, some jQuery plugins that create scrollable regions. You still wouldn’t get custom scrollbar colors on the document window itself.

    IE Example:

    <html>
<head>
  <style>
     BODY {scrollbar-base-color: #ff00ff;}
  </style>
</head>
<body>
   <div style="height: 5000px;">
   IE Test
   </div>
</body>
</html>

    WebKit Example (Chrome/Safari):

    <html>
<head>
  <style>
    ::-webkit-scrollbar {
        width: 12px;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,0.8); 
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,0.7); 
    }
  </style>
</head>
<body>
   <div style="height: 5000px;">
   WebKit Test
   </div>
</body>
</html>
    • 0