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

You can test which is working fine like this:

#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 */

}

For more information, refer to this: Working Fiddle

In JavaScript:

The scrollbar width differs in different browsers, therefore, it is easier to handle it with JavaScript. But, if you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

Otherwise, you can use:

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;

}

Refer to these links: 

• Working Fiddle
• JavaScript Working Fiddle