Customizing Browser Scroll Bar With CSS / jQuery

By . Filed in Web Design

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.

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.

(Image source: CSS Scrollbar Color Designer)

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

Gmail

Facebook

Outlook

Codepen

The Next Web

Author:

Thoriq is a writer for hongkiat.com. He has been dabbling in Web Design for 7 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.com.

Advertisement