Suganth G Suganth G - 11 days ago 5
CSS Question

Allow scroll but hide scrollbar

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?

Answer

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