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.
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:
Let`s write some code:
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-button {
width: 8px;
height:5px;
}
::-webkit-scrollbar-track {
background:#eee;
border: thin solid lightgray;
box-shadow: 0px 0px 3px #dfdfdf inset;
border-radius:10px;
}
::-webkit-scrollbar-thumb {
background:#999;
border: thin solid gray;
border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
background:#7d7d7d;
}
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.
