Remove scrollbar but not scrolling functionality

Question

I know you can define overflow:hidden; on the body of the HTML to remove the scrollbar, but I would like to still be able to scroll with the arrows or scroll wheel on a mouse.

Thanks in advance for any help.

Edit: Thanks for all the advice about on hover scrollbars and custom bars. Also thank you for all concerns about impacting users experience by removing the scrollbars. I shall elaborate a little more so you explain where I am coming from.

I have a circular page (if you scroll with a scroll wheel or arrow button, when it reaches the bottom it resets to the top of the page and starts again). A never ending loop. A scrollbar impacts on this as a bar is limited and when it reaches the bottom and resets to the top the users mouse is still at the bottom of the page meaning when they move it there is some flickering between the top and bottom of the page.

I plan to remove the scroll bar and replace it with arrow buttons at the top and the bottom of the window. This is why I would like to remove the scrollbar completely but leave the scrolling functionality.

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.