Remove scrollbar but not scrolling functionality [duplicate]

There is a library for jQuery named jscrollpane http://jscrollpane.kelvinluck.com/#examples that can modify very much.

But if you only want to hide the bar, you can also push this scrollbar out of view: http://jsfiddle.net/H27BK/

<div id="content">
    <div id="scrollable"> ... ... ... </div>
</div>

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

This all based up on a bar-width of 18 pixel.

---

So we can do some javascript scrollbar width detection script or simply add another div that we put in front of the scrollable div.

http://jsfiddle.net/uNzEz/

HTML is now:

<div id="content">
<div id="scrollable">
<div id="txt"> ... ... ...
</div></div></div>

with CSS like:

#content {
    position: relative;
    width: 200px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}
#scrollable {
   height: 150px;   
   width: 240px; /* the bar-width can be theoretical 240px - 200px = 40px */
   overflow-y: scroll;    
}
#txt {
    width: 200px;
}

​