Hide scrollbar with overflow:scroll enabled

Question

I need to hide the scrollbar on a div that has overflow:scroll; enabled so that the div will scroll with mouse and keyboard but the scrollbar itself will not be displayed.

is there a way of doing this with css or is javascript the way to go?

Answer 1

You can do this with pure CSS (at least in webkit browsers). You have to use special scrollbar pseudo-classes to achieve this

::-webkit-scrollbar {
    display: none;
}

Read this excellent blogpost for further information.

Answer 2

You could put the scrolling div inside of a second div with overflow hidden, then just make the inner div a little wider and taller (the amount may vary depending on the browser, however).

Something like this:

#outer {
    overflow:hidden;
    width:200px; 
    height:400px;
    border:1px solid #ccc;
}
#inner {
    overflow:scroll; 
    width:217px; 
    height:417px;
}​

Full example at http://jsfiddle.net/uB6Dg/1/.

Edit: Unfortunately you can still get to the scrollbars by highlighting the text and dragging, and it does make padding etc a bit more of a pain, but other than this I think javascript is the way to go.