WebKit Scrollbars

While designing my site, I played around with using a custom WebKit scrollbar for code snippets. Much like what you see on Tim Van Damme’s site or more closely like the code snippets in the OrderedList resources section.

At some point during my design process, I found myself re-reading an old post by Lukas Mathis about Google Wave’s scrollbars. In the post, he makes some really good points, like this one about changing the way your scrollbars work:

“If you’re going to change how people interact with your widgets, you should have a really good reason. People have been using scrollbars for decades. They work the same on every popular platform. Unless there’s a compelling reason, it’s a bad idea to change how scrollbars work in your particular application.”

That got me thinking. By eliminating the scrollbar buttons, I was drastically changing the way the scrollbar worked. Obviously, you could still scroll with the mouse wheel, or by dragging the scrollbar, and even clicking in the empty space, but it was no longer a full-fledged scrollbar.

So I set out to create a custom scrollbar that didn’t change the way the scrollbar inherantly worked. I came up with 2 different styles, one of which is based on the “marble” interface that was rumored to debut in Mac OS 10.6 and the other a slightly smaller, dark theme.

webkit scrollbars

I’m making both themes available for inspection, tweaking, or use. You’re free to use them without crediting me, but I definitely wouldn’t mind a link my way if you find them useful. ;) Included in the .zip files are the images and CSS.

Marble Scrollbars Black Scrollbars

The marble theme will work with both horizontal and vertical scrollbars without any modifications, the dark theme currently works only with horizontal scrollbars, but it could be modified to work with both. Obviously, these will only work in WebKit browsers, which currently means both Safari and Chrome on both Mac and Windows.

Please let me know if you have any questions or comments with a quick @reply on Twitter.

Posted by @mclaughj Tagged with #development, #code, and #css3.