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

Javascript Problem Overview

I want to hide any scrollbars from my div elements and my whole body, but still let the user scroll with the mouse wheel or arrow keys. How can this be achieved with raw JavaScript or jQuery? Any ideas?

Javascript Solutions

Solution 1 - Javascript

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>
<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.)

http://www.ryancooper.com/resources/keycode.asp">keyCode reference
http://plugins.jquery.com/project/mousewheel">mousewheel plugin
http://www.quirksmode.org/dom/events/keys.html">keydown, keypress @ quirksmode

Update 12/19/2012:

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

Solution 2 - Javascript

What about a purely CSS solution?

Solution 1 (cross browser but more hacky)

#div {
  position: fixed;
  right: -20px;
  left: 20px;
  background-color: black;
  color: white;
  height: 5em;
  overflow-y: scroll;
  overflow-x: hidden;
}

<html>

<body>
  <div id="div">
    Scrolling div with hidden scrollbars!<br/>
    On overflow, this div will scroll with the mousewheel but scrollbars won't be visible.<br/>
    Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
  </div>
</body>

</html>

Solution 2 (uses experimental features, may not support some browsers)

Just add the nobars class to any element you want to hide the scrollbars on.

.nobars {
    /* Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width */
    scrollbar-width: none;
    /* IE: https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx */
    -ms-overflow-style: none;
}
.nobars::-webkit-scrollbar {
    /* Chrome/Edge/Opera/Safari: https://css-tricks.com/custom-scrollbars-in-webkit/ */
    display: none;
}

Solution 3 (cross browser javascript)

Perfect Scrollbar doesn't require jQuery (although it can utilise jQuery if installed) and has a demo available here. The components can be styled with css such as in the following example:

.ps__rail-y {
  display: none !important;
}

Here is a complete example including the implementation of Perfect Scrollbar:

<link rel="stylesheet" href="css/perfect-scrollbar.css">
<style>
  #container {
    position: relative; /* can be absolute or fixed if required */
    height: 200px; /* any value will do */
    overflow: auto;
  }
  .ps__rail-y {
    display: none !important;
  }
</style>
<script src='dist/perfect-scrollbar.min.js'></script>

<div id="container">
  Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
</div>

<script>
  // on dom ready...
  var container = document.getElementById("container");
  var ps = new PerfectScrollbar(container);
  //ps.update(container);
  //ps.destroy(container);
</script>

Solution 3 - Javascript

You dont have to use jquery or js to make this. Its more performant with simple webkit.

Just add the code below to your css file.

::-webkit-scrollbar { 
    display: none; 
}

Caution ! This will disable all the scrollbar so be sure to put it in a specific class or id if you just want one to be hidden.

Solution 4 - Javascript

I much prefer SamGoody's answer provided to a duplicate of this question. It leaves native scrolling effects intact, instead of trying to manually re-implement for a few particular input devices:

> A better solution is to set the target div to overflow:scroll, and wrap it inside a second element that is 8px narrower, who's overflow:hidden.

See the original comment for a fleshed-out example. You may want to use JavaScript to determine the actual size of scrollbars rather than assuming they are always 8px wide as his example does.

Solution 5 - Javascript

To get this working for me, I used this CSS:

html { overflow-y: hidden; }

But I had problems using $(this).scrollTop(), so I bound to my #id, but adjusted the scrollTop of window. Also, my smooth scrolling mouse would fire lots of 1 or -1 deltas, so I multiplied that by 20.

$("#example").bind("mousewheel", function (ev, delta) {
    var scrollTop = $(window).scrollTop();
    $(window).scrollTop(scrollTop - Math.round(delta * 20));
});

Solution 6 - Javascript

As Baldráni said above

::-webkit-scrollbar { display: none; }

Or you can do

::-webkit-scrollbar{ width: 0px; }

(posted for other people that stumble on this from google search!)

Solution 7 - Javascript

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

Content Type	Original Author	Original Content on Stackoverflow
Question	Shizoman	View Question on Stackoverflow
Solution 1 - Javascript	Grace	View Answer on Stackoverflow
Solution 2 - Javascript	Peter Gordon	View Answer on Stackoverflow
Solution 3 - Javascript	Baldráni	View Answer on Stackoverflow
Solution 4 - Javascript	natevw	View Answer on Stackoverflow
Solution 5 - Javascript	Kevin Hakanson	View Answer on Stackoverflow
Solution 6 - Javascript	DardanM	View Answer on Stackoverflow
Solution 7 - Javascript	JP Silvashy	View Answer on Stackoverflow