UPDATE: ADDED SOME JAVASCRIPT TO MAKE USING THE SCROLLBAR LESS OF A USABILITY NIGHTMARE. VIEW SOURCE.

Gecko ‘Coloured Scrollbar’ Experiment

Internet Explorer 5.5 (and later) supports some non-standard CSS properties to alter the appearance of scrollbars on webpages. Purists would argue that a designer should not touch a scrollbar's appearance as it's actually a part of the UI and, therefore, poses usability problems. I agree. Scrollbars are really not a part of the canvas that designers should have influence over. Imagine if a TV program could change the look of your television set. I'm not sure what my point is, but let's continue.

Okay, first off, if your monitor is set to a very high resolution resize the window so that a scrollbar actually appears. Next, make sure you're actually viewing this page in a browser that uses the Gecko rendering engine. While there are a number of properties available to change the appearance of scrollbars (eg: shadowing, highlighting, etc...), this experiment will focus specifically on the 'scrollbar-base-color' property. This is how it's constructed for Internet Explorer:

html { scrollbar-base-color:[color value]; }

What I found was that through positioning an element directly over the scrollbar area, in Gecko-based browsers like Firefox, and applying the CSS 3 Opacity property, a coloured scrollbar can be simulated. Here are the relevant CSS rules in conjunction with the Language Pseudo-Class CSS filter in order to hide them from most modern browsers (besides Gecko-based).

html:lang(en) #content-wrap { position:absolute; left:0; top:0; height:100%; width:100%; overflow:auto; } html:lang(en) #scroll-mask { width:16px; position:absolute; right:0; top:0; height:100%; background-color:purple; opacity:0.3;-moz-opacity:0.3; }

Now, the problem arises that, when positioning an element over the scrollbar area, the scrollbar is rendered useless. The cursor is being blocked from interacting with the scrollbar by the element positioned over it. ~~So we add the following rule in order to move the positioned element below the scrollbar when the cursor hovers over:~~

~~html:lang(en) #scroll-mask:hover { z-index:-1; }~~

This is not a great solution. You have to be very careful with how you position your cursor over the scrollbar area in order for this to work. When the scrollbar's colour flickers off this is when you can actually grab and drag it up and down.

So what is the point of this, admittedly kludgy, usability nightmare? No point, just an experiment.

If you know of a way to improve upon this method, drop me a line.