Remove scrollbar but not scrolling functionality [duplicate]

Solution 1:

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

​

Solution 2:

Ok, new answer. I just developed a little trick to do so, mixed with jQuery.

Create a wrapper div inside the body, with the following css.

body { overflow: hidden; }

#wrapper { overflow: auto; }

Then, simply set their respective heights:

$("body").height($(window).height());
$("#wrapper").height($("#text").height());

Demo

To support for resizes

$(window).trigger('scroll');

$(window).scroll(function() {
    $("body").height($(window).height());
    $("#wrapper").height($("#text").height());    
});

Demo