How to disable browser or element scrollbar, but let scrolling with weel or arrow keys?

Question

I want to hide scrollbars from div element or whole body, but let user scroll it with mouse wheel or arrow keys. How to achieve this with raw javascript or jquery? Any ideas?

Answer 1

you can set the overflow with css:

body{
overflow:hidden;
}

Answer 2

Well, perhaps not the most intuitive in my opinion, but I can imagine you being able to make it a decent experience, give this a try.

overflow:hidden;

make sure the parent object has a height and width, and displays as block

Answer 3

Like the previous answers, you would use overflow:hidden to disable the scrollbars on the body/div.

Then you'd bind the mousewheel event to a function that would change the scrollTop of the div to emulate scrolling.

For arrow keys, you would bind the keydown event to recognize an arrow key, and then change scrollTop and scrollLeft of the div as appropriate to emulate scrolling. (Note: you use keydown instead of keypress since IE doesn't recognize keypress for arrow keys.)
Edit: I couldn't get FF/Chrome to recognize keydown on a div, but it works in IE8. Depending on what you needed this for, you can set a keydown listener on the document to scroll the div. (Check out the keyCode reference as an example.)

For example, scrolling with the mouse wheel (using jQuery and a mousewheel plugin):

<div id="example" style="width:300px;height:200px;overflow:hidden">
insert enough text to overflow div here
</div>

<script>
$("#example").bind("mousewheel",function(ev, delta) {
    var scrollTop = $(this).scrollTop();
    $(this).scrollTop(scrollTop-Math.round(delta));
});
</script>

(This is a quick mockup, you'd have to adjust the numbers since for me, this scrolls a bit slowly.)

keyCode reference
mousewheel plugin
keydown, keypress @ quirksmode