Webkit Browser Scrollbars

PSD Design Source File

If you get the design spec as a Photoshop file, just isolate the part you need on a white background and take a screenshot. I try not to use Photoshop for anything at all since version CS3 it has been very difficult to use for web work. I slice and dice in Fireworks, which somehow has been left alone by Adobe and, is therefore still awesome.

I am building on the Kendo framework, which leverages jQuery. It has scrollbars, and they are one of the few controls Kendo left as bitmaps, but I am going to try to base64 what I come up with and stuff it in the css file – we’ll see how that goes. But before I do that I want to make sure everything works right, so I am going to try to hack onto one of the Kendo themes to get a working preview.


The BlueOpal theme is nice but we don’t use it. I thought it would be good to put my scrollbar pieces in place of the Kendo ones and see what happens. When I open the .gif files they look strange – the slider-h.gif is 1×180 pixels, and slider-v.gif is 180×1. OK, this must be a way to pack extra pixels like a spritesheet to change the appearance dynamically. Maybe whatever they are doing makes the custom scrollbars work in IE (no, I checked). OK, forget this approach.

Let’s just create a standalone project, ¬†style the scrollbar for webkit browsers using CSS tricks and make it appear by stuffing in a lot of text in an HTML div? OK that kinda works.

One problem: I made the track using a repeating background image – it doesn’t travel well. Let’s see if we can encode it and replace the URL reference with a base64.¬† Here is how to do that. I only completed the Vertical scrollbar – you can see the horizontal bar is the right color but the gradient is the wrong way and the horizontal track is missing. By the time you read this I may have fixed that too.

Potential problem: all this trickery does not degrade well for MSIE. Should it be implemented as progressive enhancement? I loaded the fiddle in IE9 and saw Windoze scrollbars no matter what – will have to try other versions using a service. I will post some browserShots when they come back. Browsershots is way too slow, for MSIE only use NetRenderer.

scrollbars_ie7 scrollbars_ie10


MSIE 7-9 look identical, V10 has a new scrollbar. None show webkit CSS scrollbars. Firefox uses OS-like scrollbars.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

Captcha loading...

This site uses Akismet to reduce spam. Learn how your comment data is processed.