Remove scrollbar but not scrolling functionality [duplicate]

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

​

Answer 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

Answer 3

You can try using one of the jQuery scrollbar plugins, they allow for customized css design...

You can simply choose to design your scrollbar to be invisible, but mouse functionality will remain...

my personal favorite is malihu's, just make sure to use it's mousewheel extension.

EDIT:

Perhaps after you check out how custom designed scrollbars look, you can rethink showing scrollbars. they are, after all, useful and instructive.