Custom Scroll Bar

Question

I would like to replace the dredged scrollbar that shows on PC web browsers with something a little nicer.

I have a div that has a "width" set and "overflow-x" set to "scroll", this gives me the horizontal scroll bar.

How can I change this standard scroll -

enter image description here

To something like this -

enter image description here

I'm sure it could probably be done with javascript, but don't know how to implement.

Cheers...

sorry should have mentioned, I have edited the post. – glennlawr Sep 11 '12 at 23:17 — glennlawr, Sep 11 '12 at 23:17

score 0 · Answer 1 · answered Sep 11 '12 at 22:48

0

Check this out: http://jscrollpane.kelvinluck.com/

You can customize scroll bar size and color.

(You have not specified and I am assuming this is for web browsers)

answered Sep 11 '12 at 22:48

Valamas

24,169
25
107
177

I was hoping to change more than the size and color. Maybe add scroll arrows on each side like in my 2nd image. – glennlawr Sep 11 '12 at 23:18
you should be able to do that by onclick of those button and changing the scroll position. See similar here: http://stackoverflow.com/questions/7303948/how-to-auto-scroll-to-end-of-div-when-data-is-added/7303972#7303972 – Valamas Sep 11 '12 at 23:44
the scroll bar and those buttons are two different implementations – Valamas Sep 11 '12 at 23:44
I will keep this in mind for other scroll options I may want in the future. Cheers... – glennlawr Sep 12 '12 at 11:02

score 0 · Accepted Answer · answered Sep 11 '12 at 23:30

0

You could achieve this using Jquery Tools Scrollable. If it doesn't solve your issue on its own, maybe a combination of it with Jquery UI as in this example will.

answered Sep 11 '12 at 23:30

Robyflc

1,209
11
16

Custom Scroll Bar

2 Answers2