How can one use scroll bar images?

Question

How can I replace the scrollbar's images using HTML/CSS?

I have:

scrollbar-base-color: #00acee;  
scrollbar-dark-shadow-color: #00acee;  
scrollbar-track-color: #ffffff;  
scrollbar-face-color: #00acee;  
scrollbar-shadow-color: #00acee;  
scrollbar-highlight-color: #00acee;  
scrollbar-3d-light-color: #00acee;

Can I use an image to accomplish the same idea?

Answer 1

No you can't use images in place of the scroll bar. I'll also just mention that changing the colours is very annoying to users and it only works in IE anyway, so just stick with the standard GUI elements.

Answer 2

as far as i know you cant style a scroll bar with an image. if you want to use jquery, you can do so easily using this jquery plugin:

http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html

The trick there is to "simulate" a scroll bar using some divs, which you can style any way you want, since they are just regular divs. After that its easy to just use the scrollTop property and scroll events etc (but you dont really need to know how it works to use it)

Answer 3

It is not possible to put an image inside the scrollbar. Customizing the scrollbar is not a W3C spec (IE only CSS), but details on what is possible can be found here:

http://www.quirksmode.org/css/scrollbars.html

Answer 4

jScrollPane (demo)

or

Interface (demo).

Both using jQuery.

Answer 5

For MooTools, there's MooScroller.

Steve

Answer 6

No, you can't use an image in the scroll bar. (Also, even changing the color is only supported in IE in non-standard mode.)

The only way to use images in a scroll bar would be not to use the standard scroll bar at all, but implement a replacement scroll bar yourself using DHTML, or find someone who has done that already.

However, you should be a bit restrictive when changing the look of controls that the users are already used to. If you are not careful you may end up confusing people so that they don't even recognise it as a scroll bar at all...

Answer 7

For webkit based browsers (for a sufficiently new value of "webkit") there are a collection of propriety CSS properties.

Answer 8

Webkit == Safari and Chrome, but Firefox and Opera have plans to implement similar in upcoming releases. The spec is a killer though, so it may not be worth using even if you have the support.

Mootools has quite a few:

1. Mooscroller (will be implemented into Mootools -more),
2. MooScroll (based on Solutaire's?)
3. UvumiScroll
4. MochaUI's

I imagine it is part of Ext UI, and probably JQ's UI library, but have no personal experience there.

One non-library dependent class: http://www.hesido.com/web.php?page=customscrollbar