Allow scroll but hide scrollbar [duplicate]

I have a div with element styles like this:

 <div style="overflow-y: auto; max-height: 300px;">< id="DivTableContainer" ></div>

I need to allow scrolling along the y-axis when it becomes higher than 300px, this works fine. But I need to set "visiblity = false" to scroll bar itself.

I tried to use this element style:

overflow-y: hidden;

While it hides the scroll bar, it also disallows scrolling. Is there a way to get scrolling without having the scrollbar visible?

Solution 1:

It's better, if you use two div containers in HTML .

As Shown Below:

HTML:

<div id="container1">
    <div id="container2">
        // Content here
    </div>
</div>

CSS:

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

 #container2{
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-right: 20px;
}

Solution 2:

I know this is an oldie but here is a quick way to hide the scroll bar with pure CSS.

Just add

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

To your id or class of the div you're using the scroll bar with.

Here is a helpful link Custom Scroll Bar in Webkit

Solution 3:

Try this:

HTML:

<div id="container">
    <div id="content">
        // Content here
    </div>
</div>

CSS:

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

#content{
    width: 100%;
    height: 99%;
    overflow: auto;
    padding-right: 15px;
}

html, body{
    height: 99%;
    overflow:hidden;
}

JSFiddle Demo

Tested on FF and Safari.