JoomlaVision > Web design > How to Customize Browser Scrollbars Using CSS3

How to Customize Browser Scrollbars Using CSS3

We’re all using web browsers to navigate on internet. Most of you(to be more specific, 65% according to my analytics) are using Chrome and Safari to navigate through this website. These 2 browsers have something in common: they are both built on the WebKit platform, or in other words, they are WebKit browsers. Although Google and Apple assigned them already some quite nice UI elements, some people thought that there is room for more.

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Did you know that you can customize the way a scrollbar looks? Let’s say you’ve built a great website but you want to make it awesome. Changing the way the scrollbar looks can be one of the steps for improving a layout.

Customizing scrollbars is easy, being based on a pure CSS solution, but there’s a glitch: custom scrollbars works only for WebKit browsers. But hey, covering more than 60% of the browsers marketplace is certainly a great achievement.
I’ve built a simple example which explains how you can change they way a scrollbar looks but before the code, here are the differences between my regular Chrome scrollbar and the one I`ll present you:

How to Customize Browser Scrollbars Using CSS3

Let’s write some code:

::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-button {
	width: 8px;
	height:5px;
}
::-webkit-scrollbar-track {
	background:
	border: thin solid lightgray;
	box-shadow: 0px 0px 3px #dfdfdf inset;
	border-radius:10px;
}
::-webkit-scrollbar-thumb {
	background:
	border: thin solid gray;
	border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
	background:
}

As you noticed already, each element has the custom prefix ::-webkit-. The elements I stylized are main scrollbar, scrollbar buttons and scrollbar thumb. For the full list of elements and states, visit Chris Coyier’s article related to custom scrollbars. What I did is just a basic example, based only on CSS background colors and some other CSS properties but you can actually modify scrollbars from the bottom by replacing the default images for tray or buttons with some new ones, using of course, CSS and the lovely background attribute.

Related posts