Hidding scrollbar but not stoping scrolling [duplicate] - html

Question

This question already has answers here:
Hide scroll bar, but while still being able to scroll
(42 answers)
Hide scroll bar of nested div, but still make it scrollable [duplicate]
(8 answers)
Closed 8 years ago.
Is there a way to hide scroll bar, but still leaving option of scrolling up/down?
I try overflow: hidden;
It removes scroll bar but i can not scroll.

Answer 1

DEMO
MARKUP:
<section>
<article>
<p></p>
<p></p>
</article>
</section>
STYLE:
*{
box-sizing: border-box;
}
section{
width:480px;
height:320px;
overflow:hidden;
margin:0 auto;
border: 2px solid #ccc;
position: relative;
}
article{
height: 100%;
overflow-y: auto;
width: 500px;
padding: 20px 40px 20px 20px;
}

Answer 2

If you want to do it without plugins:
HTML
<div id="content">
<div id="scrollable"> ... ... ... </div>
</div>
CSS
#content {
position: relative;
width: 200px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}
#scrollable {
height: 150px;
width: 218px; /* #content.width + 18px */
overflow-y: scroll;
}
However, there are a lot of jquery library's that enables a lot of nice extra's

Answer 3

Yes, this is certainly possible and fairly easy. Lets say we have two divs named inner-div and outer-div:
.outer-div {
width: 200px;
height: 300px;
overflow: hidden;
}
.inner-div {
width: 215px; //Width of it's parent + 15px (the average width of a scrollbar)
height: 300px;
overflow: scroll;
}
The inner-div is a little bit wider then the outer-div (15 pixels). The outer-div has the property overflow: hidden;. The scrollbar will be invisible because it falls just outside of outer-div, but you will still be able to scroll. I didn't test it, but you get the idea.