Webkit browsers such as Safari and Chrome support some superb CSS3 styling.
They are ( even thought I use firefox as my primary browser ) the most advanced browsers.
For a while now I have created custom scroll bars using a Javascript library called Mootools, other libraries such as jQuery and Prototype can do this too, but here is one easy way to do it with CSS alone;
here is the simple code, if you know CSS it will be self explanatory, else I have added some commenting
/* were a webkit browser, lets style our scroll bar */
@media screen and (-webkit-min-device-pixel-ratio:0) {
html{
/* hide overall scrolling */
overflow: auto;
}
body {
/* absolute position our 'body' and allow for the width of the scroll bar */
position: absolute;
left: 0;
top: 0;
right: 10px;
bottom: 0;
padding-right: 10px;
overflow-x: auto;
overflow-y:scroll;
}
::-webkit-scrollbar {
/* set the width of the scroll bar */
width: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
/* hide the arrows */
display: block;
height: 10px;
}
::-webkit-scrollbar-track-piece {
/* set the style/colour of the scroll bar background */
background:
-webkit-gradient(
linear,
0 0,
100% 0,
from(rgba(0,0,0,0.2)),
to(rgba(0,0,0,0.12))
);
-webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.35);
-webkit-border-radius: 5px;
}
::-webkit-scrollbar-thumb:vertical{
/* this is the acutal scrooll bar, set the colours here to match your site */
/* I have used grey's (#464646 & #383838 & #cccccc) */
background:
-webkit-gradient(
linear,
0 0,
100% 0,
from(#464646),
to(#383838)
);
-webkit-border-radius: 6px;
border: 3px solid #cccccc;
-webkit-background-clip: padding-box;
}
::-webkit-scrollbar-track-piece:horizontal{
background: none;
-webkit-box-shadow:none;
}
::-webkit-scrollbar:horizontal{
height: 16px;
}
::-webkit-scrollbar-thumb:horizontal{
height: 12px;
-webkit-border-radius:12px;
background:
-webkit-gradient(
linear,
0 0,
0 100%,
from(rgba(0,0,0,0.1)),
to(rgba(0,0,0,0.25))
);
border: 6px solid transparent;
-webkit-background-clip: padding-box;
}
}
}
