Scrollable but no scroll bar

Question

How can I let a DOM object such as div be able to scroll with scroll wheel on the mouse or by the arrow keys (like overflow:scroll), but not show the scroll bar (like overflow:hidden)?

Answer 1

You could set bind an event listener to scrolldown / scrollup (via the mousewheel event, looking at event.wheelDelta to calc size and directino of scroll) and manually position an absoluteley positioned div inside another fixed height absolutely / relatively positioned div. So on scroll down you decrease the y position of the inner div, and on scroll up you increase the y position.

For arrow keys, just bind a similar function to keydown event checking for the down / up arrow as appropriate.

I made a jsfiddle exampling this technique here: http://jsfiddle.net/wsmithrill/U7ju8/32/

Answer 2

If you want to skip javascript altogether, you can try what I suggested here.

Basically, have a container div that's slightly narrower than your content div. Have the container set to overflow:hidden, but the content div set to overflow:scroll. If the container is narrower, it will hide the scroll bar.