Ugly scroll bars with overflow: scroll in Safari, Firefox

Question

I'm building a page here with the entry content in the middle set at a fixed height with overflow: scroll so as to show all the content

http://www.avgdigital.co/elena_urioste/category/biography/

Soon to be at

http://elenaurioste.com/category/biography

Normally it looks great, in Chrome and Safari, but in my client's version of Safari and in Firefox, the scrollbars look hideous. I've encountered this problem before, and it really upsets clients.

Is there a way to get the ugly scrollbars to conform to what they look like now in Google chrome, where they are practically invisible? I'm hoping this doesn't require a hugely complex jQueryUI type solution.

Answer 1

You can style your scroll bars using CSS check it out

here

Answer 2

maybe wanted something like this, if so please refere to this; for the jquery solution : i found this (demo)

 $('#scrollbar1').tinyscrollbar();