0

Possible Duplicate:
Facebook's horizontal scrollbar in ticker & chat sidebar

I am implementing a div with inner content as overflow-y: auto. But I need to change the style of the scrollbar and make it similar to Facebook chat scrollbar style.

Code:

<div style='overflow-y: auto; overflow-x:hidden;'>
<div id='divInner1'>Some Content</div>
<div id='divInner2'>Some Content</div>
<div id='divInner3'>Some Content</div>
<div id='divInner4'>Some Content</div>
<div id='divInner5'>Some Content</div>
</div>

How can I style scrollbar vertical for the outermost div with styling same as that of facebook?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Balraj Singh
  • 3,381
  • 6
  • 47
  • 82
  • I have tried to put some style. But i am not able to decrease the with and make it thin as Facebook chat vertical scrollbar. overflow: auto; scrollbar-face-color: #c4c4c4; scrollbar-base-color: #f6f6f6; scrollbar-arrow-color: #c4c4c4; scrollbar-track-color: #f6f6f6; scrollbar-shadow-color: #c4c4c4; scrollbar-highlight-color: #c4c4c4; scrollbar-3dlight-color: #c4c4c4; scrollbar-darkshadow-color: #c4c4c4; – Balraj Singh Apr 11 '12 at 08:23

2 Answers2

2

Take a look at: http://areaaperta.com/nicescroll/demo.html

Gert Van de Ven
  • 997
  • 6
  • 6
  • Yes i can use that but in IE i am asked always to allow blocked content popup due to third party jquery is there any way to avoid that? apart from changing IE browser settings? – Balraj Singh Apr 11 '12 at 08:36
  • Did you add the files on your own server? I don't see why IE is blocking this. – Gert Van de Ven Apr 11 '12 at 08:40
0

I think this has to be styled for each browser engine seperately. For Chrome and Safari, here is a very good description about how to do so. http://www.webkit.org/blog/363/styling-scrollbars/

juleee
  • 456
  • 1
  • 7
  • 20