Question

Possible Duplicate:
hide scrollbar while still able to scroll with mouse/keyboard

I’ve made a piece of UI for a web app. It’s a side bar and it needs to let the user scroll through it without a scroll bar. The content is 500px high, but the container is 300px high.

I’ve set the container to have overflow:scroll but then I get scroll bars (which I expected). I know I can disable the scroll bars using overflow:hidden but that also disables the scrolling.

Is there a way I can allow it to scroll but disable the scroll bars?

Answer 1

See hide scrollbar while still able to scroll with mouse/keyboard

// get the width of the textarea minus scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// width of our wrapper equals width of the inner part of the textarea
document.getElementById("wrapper").style.width = textareaWidth + "px";

Or with jQuery catching of mouse scroll with the mousewheel plugin: How can I disable a browser or element scrollbar, but still allow scrolling with wheel or arrow keys?