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.
Best Answer
Just a test which is working fine.
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
,Working Fiddle
JavaScript Working Fiddle
Information:
Based on this answer, I created a simple scroll plugin.