can't hide scrollbar when using overflow: auto

Question

I have this CSS:

.div {
    background-color: red;
    position: relative;
    height: 414px;
    overflow: auto;
    width: 902px;
    margin: 0px auto;
}

I tried with overflow-y: hidden;, scrollbar disappear but scroll isn't working. Hope you understand what I want... Also, should I use auto or scroll? With auto I see horizontal bar too.

Here is JSFiddle: http://jsfiddle.net/sp95S/
Thanks!

Answer 1

Create an inner div: http://jsfiddle.net/sp95S/1/

.div {
    background-color: red;
    position: relative;
    height: 214px;
    overflow: hidden;
    width: 452px;
    margin: 0px auto;
}
#inner{
    width: 100%;
    overflow: auto;
    height: 100%;
    padding-right: 15px;
}

Answer 2

It seems like you want to have the page still scroll without the scrollbar showing.

This has been answered here a couple of times already:

• hide scrollbar while still able to scroll with mouse/keyboard
• Hiding the scrollbar on an HTML page

Basically you can use javascript (or jquery, though you don't necessarily need it). On webkit browsers, there is a function to hide the scrollbars:

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

but it won't work for firefox or internet explorer or opera.