how to make a custom scroll bar with css

Question

just wondering if it's possible to change the style of a scroll bar with css,(not the main window)

I have a some text inside a div that scrolls down and the scrollbar is just too big, and makes the whole website ugly,

any ideas?

thanks

Answer 1

See the accepted answer for a good technical solution.

But then... really, don't do it: customizing scrollbars and UI elements is usually a very bad idea: it overrides user's style, and could pose serious problems to page accessibility. If your website looks ugly, then you need to re-work on the design, to integrate into the browser.

Adapt your website to look good in the browser, don't adapt the browser to look good in your website!

Answer 2

If you want to -edit- the visual nature of the scroll bar... this can't be done with CSS. As far as I know though, JavaScript can do it.

If you just want to stop the scroll bar from showing up, you can set

div {
    overflow: hidden;
}

to force the scroll bar to not appear. You will lose access to the content though.

Answer 3

Some versions of Internet Explorer allowed you to style scrollbars with CSS, but this was not part of the CSS standard and probably not the way to go these days.

For cross-browser compatibility, you will need to simulate scrollbars using JavaScript; luckily there are libraries to do this, such as the JQuery plugin jScrollPane.

Answer 4

I know it's not of much help, but using scrollbars other than the browser's main scrollbar is generally frowned upon from a usability perspective. Users find it often either hard to grasp (your average visitor is practically stupid, always remember this) or just annoying if only parts of the page scroll and parts don't. Sometimes the inner page only scrolls when the mouse is in fact hovering it, sometimes when you reach the end of the inner page suddenly the rest of the page starts scrolling with it, and I'm just scratching the surface of annoying features of the inside scrollbars now.

If there is any way of showing the entire text and/or leaving the scrolling to the browser's main scrollbar, please do so :)