...
CSS, Tutorials

How to scroll through whole page without the scrollbar being shown?

31 January 2019

I want to be able to scroll through the whole page, but without the scrollbar being shown.

In Google Chrome it’s working fine if we write the CSS like this:

CSS

::-webkit-scrollbar { 
    display: none; 
}

But, the thing is that above CSS code is does not work for Mozilla Firefox and Internet Explorer even we tried this in CSS:

overflow: hidden;

Now, I rectified the solution regarding this issues and which is working fine in all modern browsers.

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

Leave a Comments