How can I disable a browser or element scrollbar, but still allow scrolling with wheel or arrow keys?

by

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

Update 12/19/2012:

The updated location of the mousewheel plugin is at: https://github.com/brandonaaron/jquery-mousewheel

More Related Contents:

  1. How to force browser to show image 3 inches wide?
  2. How to check if css value is supported by the browser?
  3. How to display an chage photo option on mouse hover similar to linkedin using Javascript? [closed]
  4. Reloading a single div in an html page [closed]
  5. How to invoke animation when redirection in jsf?
  6. fixing slider on my website [closed]
  7. Only detect click event on pseudo-element
  8. Select all elements that have a specific CSS, using jQuery
  9. Caching a jquery ajax response in javascript/browser
  10. focus doesn’t work in IE
  11. Ellipsis in the middle of a text (Mac style)
  12. Execute function before refresh
  13. how to disable DIV element and everything inside [duplicate]
  14. Scale a div to fit in window but preserve aspect ratio
  15. How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?
  16. How Do I Stop My Web Content From Shifting Left When The Vertical Scrollbar Appears? Roll-Up of Advice 2017 [duplicate]
  17. Load HTML page dynamically into div with jQuery
  18. jQuery position DIV fixed at top on scroll
  19. Can you have a JavaScript hook trigger after a DOM element’s style object changes?
  20. jQuery in Chrome returns “block” instead of “inline”
  21. How To Include CSS and jQuery in my WordPress plugin?
  22. Detect browser wrapped lines via javascript
  23. Extracting text from a contentEditable div
  24. How can I dynamically highlight strings on a web page?
  25. Wrapping lists into columns
  26. How to stop user from printing webpages? using javascript or jquery
  27. How do I dynamically adjust css stylesheet based on browser width?
  28. How can I compare two color values in jQuery/JavaScript?
  29. How should I crop an image at client side using jcrop and upload it?
  30. Removing element with jQuery?

Leave a Comment