Styling Browser Scrollbar

Question

I saw this years before, but since it was not widely supported, websites are dropping usage of it.

I am currently designing a website which will have scrollbars inside the design and wondering whether CSS2 have any specification on styling browser scrollbars because the default colours don't fit. If there's no specification, any reference to specific browser behaviour would be appreciated.

If there's no CSS specification on it, I would have to rely on a custom generated scrollbar using JS. References on how to build one is also appreciated.

Answer 1

I quote myself from this thread, since it's related:

From a usability point of view, changing scroll bars is a no-go. The user is familiar with his/her operating system and the visual environment it provides. Changing this does create confusion, especially among those who are new to using computers, old people etc.

The majority of users today will probably recognize a scroll bar as long as it has it's basic shape - and many will not even use the bar itself, but just the scroll wheel on the mouse.

It's still a thing to think about though. Consider your audience. And whatever you do make sure it actually works on all platforms/in all browsers if you use a custom scroll bar.

Answer 2

A JavaScript solution can be found at http://www.hesido.com/web.php?page=customscrollbar. Note that you do have to pay for this, but even if you don't want to go that route it shows what is possible.

Otherwise a jQuery solution and a Prototype solution are also available.