1

How can I make my scroll bar black for a <div>?

Is there anything that will work in Webkit, IE7 to IE9 and Firefox?

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
cdub
  • 24,555
  • 57
  • 174
  • 303
  • please, take an attention to the question I have made at: http://stackoverflow.com/questions/12301588/how-do-we-make-a-styled-scroll-bar-for-a-div-with-mouse-wheel-sensitive – NaN Sep 06 '12 at 13:49

4 Answers4

7

You cannot do this in Firefox. Only IE and webkit browsers support modifying the scrollbar.

See http://msdn.microsoft.com/en-us/library/ie/ms531153%28v=vs.85%29.aspx on how to do it in MSIE and http://www.webkit.org/blog/363/styling-scrollbars/ on how to do it in webkit.

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
3

You cannot style the scrollbar of the browser. It's not universally supported (although IE did try to implement it).

Also, it's a bad idea to do so from an accessibility perspective. Think of (old) people who cannot see your very slim, almost invisible custom scroll bar or don't know that what you have there is actually a scroll bar.

You can use custom scrollbar plugins in JS like this one. It's all over the place

Joseph
  • 117,725
  • 30
  • 181
  • 234
  • yeah i'll use the plugin jquery provides – cdub May 12 '12 at 08:25
  • yeah i will use jscrollpane and try it out – cdub May 12 '12 at 08:28
  • 1
    "Cannot" is more like a "should not", but still +1. Webkit also supports it. – kapa May 12 '12 at 08:29
  • @bažmegakapa I must be left behind. I thought only IE did it. – Joseph May 12 '12 at 08:29
  • 1
    There can certainly be cases where styling the scroll bar for an inline element with `overflow:auto` or a frame would make it easier to use. However, I think that's a poor choice in the first place, but Gmail for example does use it (overflow:auto with native browser scroll bar). – Wesley Murch May 12 '12 at 08:30
  • @WesleyMurch facebook also does that too on the ticker and chat list, with a scrollbar hidden in the far right of the container. – Joseph May 12 '12 at 08:35
  • 1
    Yeah there are lots of examples mostly in web applications, but definitely not limited to them. I think when you style the "main" scroll bar, that's an atrocity - and I'm sure some hardcore UX folks would disagree, but I like the idea of having access to style the scroll bars "inside" the page. – Wesley Murch May 12 '12 at 08:38
1

As Pez Cuckow said:

I imagine that custom scrollbar is implemented in javascript, it looks very slick and you can't make a browsers scrollbar look that good!

Find an example I just put together for you at: http://jsfiddle.net/9LHPW/2/ - note check the resources tab as this includes four external files (3x Js and 1x CSS)

Have a look at this website for a further example (looks like exactly what you want) with Javascript and jQuery: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

You can find the plugin's home at http://manos.malihu.gr/jquery-custom-content-scroller

Along with a how to use it section!

NaN
  • 8,596
  • 20
  • 79
  • 153
0

I agree you shouldn't tamper with the visibility (I'm looking at you Apple) of the scrollbar of a scrollable region. Sometimes, a box with scrollable text fits just inside the boundaries and there is no visual clue letting a user know that it scrolls thereby confusing the user. Is it really a good idea to prevent the user from being able to use your application? Most likely not, but you can also argue back that your target demographic wont have any problems; an application for extreme inline competition is probably not going to be used by people who aren't able to see very well. However there are accessibility/usability concerns that go beyond visual hinderances; cognitively impaired, or non tech-savvy, individuals might be very good at said aggressive inline and want to compete in your upcoming event but wont be able to because the black-on-black scrollbar looks awesome.

That all said, do what make you happy. That's what I do.

kalisjoshua
  • 2,306
  • 2
  • 26
  • 37