Customizing Browser Scroll Bar With CSS / jQuery
Windows, OS X and Linux have their own style for the scroll bar as you can see in the following screenshot. This in return could lead to undesired results and consistencies for your design.
In this post we will see what we can do to customize the scroll bar look so that it can sit well with your overall design.
Recommended Reading: Sticky Position (Bar) with CSS or jQuery
Internet Explorer 5.5
Back in IE 5.5, the Internet Explorer team introduced a set of non-standard CSS properties that allows us to style the scroll bar, as follows.
body {
scrollbar-face-color: #000000;
scrollbar-shadow-color: #2D2C4D;
scrollbar-highlight-color:#7D7E94;
scrollbar-3dlight-color: #7D7E94;
scrollbar-darkshadow-color: #2D2C4D;
scrollbar-track-color: #7D7E94;
scrollbar-arrow-color: #C1C1D1;
}
There is even a software to generate these style rules. However, these properties do not totally control the scrollbar, only the colors. In addition, these properties has been dropped since Internet Explorer 6, so they are no longer applicable today.
Using jQuery Plugin
There are a number of jQuery plugins to customize the scroll bar. One that is really popular is jScrollPane. jScrollPane converts the scrollbar into HTML structure so it can be fully customized through CSS, and it also has better cross-browser support. Furthermore, with the APIs provided you can also set scroll bar behaviour on certain mouse events.
The only downside is that it relies on a number of other JavaScript libraries: jQuery, Mousewheel. Technically, having to load a lot JavaScript combined could affect your website performance. But at the moment, using jQuery is the only best option if you are concerned about browser support.
Alternative jQuery Plugins
Webkit CSS Properties
Webkit introduced its proprietary CSS scrollbar selectors, as follows.
::-webkit-scrollbar ::-webkit-scrollbar-button ::-webkit-scrollbar-track ::-webkit-scrollbar-track-piece ::-webkit-scrollbar-thumb ::-webkit-scrollbar-corner ::-webkit-resizer
These selectors allow you to customize the scrollbar styles in browsers powered with Webkit such as Google Chrome, Safari, and Opera. Here is a basic example of the implementation.
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background-color: #eaeaea;
border-left: 1px solid #ccc;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
}
::-webkit-scrollbar-thumb:hover {
background-color: #aaa;
}
Examples
