Custom styled scrollbar for overflow areas using CSS

Question

What is the most effective way to have scrollbars on a website to a custom style using CSS?

I'm talking about scrollbars within a DIV with overflow: scroll; set and not on the browser window maybe using a JPG as the scrollbar design.

Hope this explains what I'm trying to achieve.

Thanks

Answer 1

At the moment you can redraw scrollbars with pure CSS only on webkit browsers:

• http://css-tricks.com/custom-scrollbars-in-webkit/

For other browsers you've to use workarounds, using javascript to emulate the scrolling effect. Some resources:

• http://slodive.com/web-development/jquery-scroll/
• http://www.noupe.com/javascript/30-javascriptajax-techniques-for-sliders-scrollers-and-scrollbars.html
• http://www.script-tutorials.com/custom-scrollbars-cross-browser-solution/
• http://www.dynamicdrive.com/dynamicindex17/jquerycustomscrollbar/index.htm

Answer 2

The scrollbar is a component of the OS, so the browser doesn't give you any liberty for styling it. The best alternative is using Javascript, there are some good libraries for custom scrollbars, Tiny Scrollbar, for example.