Hidding scrollbar but not stoping scrolling

Question

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.

possible duplicate of [How can I disable a browser or element scrollbar, but still allow scrolling with wheel or arrow keys?](http://stackoverflow.com/questions/1326570/how-can-i-disable-a-browser-or-element-scrollbar-but-still-allow-scrolling-with) or http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll — Aibrean, Sep 09 '14 at 13:40
The second link has a CSS-only answer. For the record, nothing in your question says it must be a CSS-only answer. Tags are for sorting. http://jsfiddle.net/5GCsJ/954/ — Aibrean, Sep 09 '14 at 13:47

score 3 · Accepted Answer · answered Sep 09 '14 at 13:47

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

score 0 · Answer 2 · answered Sep 09 '14 at 13:45

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

JasonK · Answer 3 · 2014-09-09T13:53:18.137

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.

Hidding scrollbar but not stoping scrolling

3 Answers3

DEMO