What's the deal with CSS and scroll bars?

Question

I\'ve got a client with an HTML page with a couple of scrolling divs with text content. She\'s using a heavily image-based design so the default scroll bars don\'t suit it a

Answer 1

Its kind of possible.

body {
    scrollbar-face-color: #ffffff;
    scrollbar-highlight-color: #000000;
    scrollbar-shadow-color: #ffffff;
    scrollbar-3dlight-color: #ffffff;
    scrollbar-arrow-color: #000000;
    scrollbar-track-color: #808080;
    scrollbar-darkshadow-color: #000000;
}

Note:: It may not work if you have specified an XHTML Doctype!!

Answer 2

There's a jQuery answer to this -

jScrollPane

There are some nice examples of the effects it can achieve

Answer 3

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 4

You can change the colours with CSS but IIRC only IE v5.5+ supports this CSS. Other browsers do not!

See here for a demo: http://www.iconico.com/CSSScrollbar/