Styling of on-page scroll bars

Question

I am working on a site to the specification of a designer who loves to put styled scroll bars on the page (not the main scroll bar on the right, but for various fixed-height divs on the page, when the content overflows).

I'm not asking if this practice is "right" or not, and I know it's generally accepted to be a bad idea in terms of user-experience, but that doesn't change what the client is now expecting to see on their site.

Does anyone know of any relatively bug free, cross browser methods for doing this. Examples I've seen so far include Skinned HTML Scrollbar, Ajaxian Webkit, and jScrollPane, but I'd like to hear from anyone who has achieved this functionality in the past before I implement one of these.

Thanks in advance.

Answer 1

I've used jQuery in the past when a client and their designer insisted in having customised scroll-bars. It's quite easy to stick a div on the side of a box and make it draggable between limits (and interpret the position to set the scroll offset).

But you also have to consider what happens if they want to scroll using the mousewheel, or middle-click. They're not blockers but you'll have to write listeners to update the scroll-bar position too.

Whether or not you should do it is a completely different question. You should certainly not just rely on your custom JS. Make the JS disable the scrollbar and paint all your controls using JS. If you don't do this, people with JS disabled/blocked won't be able to use your site.