How To Hide Scrollbar With Scroll Enabled Using CSS

For More Videos Visit Our YouTube Channel

Hide Scrollbar With Scroll Enabled Using CSS

Here we consider how to Hide Scrollbar With Scroll Enabled. Suppose we have a Div with Scroll bar enabled. The style applied for the div with ID InnerDiv is as follows.

#InnerDiv
{
        width: 100%;
        height: 100%;
        overflow-y: scroll;
}


Now, for hiding Scroll bar, place this div within another div. Let the ID of the Outer Div be MasterDiv. MasterIDv has following style applied.

#MasterDiv
{
        height: 100%;
        width: 100%;
        overflow: hidden;
}


Now for hiding Scroll bar, increase the padding right style of InnerDiv. So that the scroll bar of InnerDiv will be hidden within MasterDiv. All you needs to do is place following style for InnerDiv.

#InnerDiv
{
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        padding-right: 17px;
}


By applying this much of style, we can hide scroll bar of InnerDiv. But the scrolling will be enabled for the InnerDiv.