Hide scroll bar, but while still being able to scr

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 anymore.

Is there any way I can remove the scrollbar while still being able to scroll the whole page? With just CSS or HTML, please.

Answer 1

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}

Call these functions, for any point you want to load or unload or reload the scrollbars. Still scrollable in Chrome as I tested it in Chrome. Not sure of the other browsers.

Answer 2

this will be at the body:

<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>

and that is the css:

#maincontainer 
{
background:grey ;
width:101%;
height:101%;
overflow:auto;
position:fixed;
}

#child 
{
background: white;
height:500px;
}

Answer 3

As of December 11th 2018 (Firefox 64 and above), the answer to this question is very simple indeed as Firefox 64+ now implements the CSS Scrollbar Styling spec.

Just use the following CSS:

scrollbar-width: none;

Firefox 64 release note link here.

Answer 4

Just set the width of the child's width to 100% , padding to 15px, overflow-x to scroll and overflow:hidden for the parent and whatever width you want, it works perfectly on all major browsers including IE Edge with an exception of IE8 and lower.

Answer 5

Just a test which is working fine.

#parent{
    height: 100%;
    width: 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{
    height: 100%;
    width: 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

Info:

Based on this answer, I created a simple scroll plugin. I hope this will help someone.

Answer 6

I had this problem. Super simple to fix. get two containers. The inner will be your scrollable container and the outer will obviously house the inner:

#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }

Super simple and should work with any browser. Good Luck!