Cheesetoast

Brain Food for Web Developers

webkit-scrolling-small

Custom Scrollbars for Webkit Browsers

A comparison of the scrollbar with and without webkit

Having just learned from CSS Tricks how to customize the scrollbar on webkit browsers I thought I’d update Cheesetoast with a shiny new scrollbar and share the process.

If you’re already using a webkit browser you should already see that this site now has new vertical and horizontal scrollbars.

First I set the dimensions of the scrollbar itself. The width will apply to the vertical bar and the height applies to the horizontal.

::-webkit-scrollbar {
width: 10px;
height: 8px;
}

Next up is the track, the part of of the scrollbar behind the handle. It’s possible to use other webkit features such as box-shadow and border-radius:

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,155,194,0.7);
-webkit-border-radius: 10px;
border-radius: 10px;
}

Finally I setup the “thumb”, the handle part of the scrollbar:

::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(0,155,194,0.5);
-webkit-box-shadow: inset 0 0 3px rgba(0,155,194,0.6);
}

I used the selector :horizontal for this part so that I can style the horizontal bar differently from the vertical bar (you can use :vertical too).

::-webkit-scrollbar-thumb:horizontal {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0,0,0,0.9);
}

That’s all there was to it. For more information on webkit scrollbars you can read the webkit blog.

Author: Graham

My name is Graham and I'm a Scottish web developer living in California. I love working with clean code to make attractive and usable websites. I'm also interested in cooking, gardening, and taekwondo.

Comments are closed.