Hide scroll bar, but while still being able to scroll

Question

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.

Answer 1

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.