Hide scroll bar, but while still being able to scroll

css, firefox, google-chrome, html, internet-explorer

Solution

Just a test which is working fine.

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript:

Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do `Element.offsetWidth - Element.clientWidth`, the exact scrollbar width will show up.

JavaScript Working Fiddle

Or

Using `Position: absolute`,

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

Information:

Based on this answer, I created a simple scroll plugin.

Problem

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ``` ::-webkit-scrollbar { display: none; } ``` But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this in CSS: ``` overflow: hidden; ``` That does hide the scrollbar, but I can't scroll any more. Is there a way I can remove the scrollbar while still being able to scroll the whole page? With just CSS or HTML, please.

Original source

Related problems