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

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?

Answers:

Answer

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

Answer

What about a purely CSS solution? I've tested this and it works fine. However, I would recommend Solution 3 as isn't hacky, it's supported by all browsers with JS and it's very simple.

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 (IE and Chrome only)

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

The Firefox overflow: -moz-scrollbars-none is, according to MDN, obsolete. It used to work but now hides the overflow and disables scrolling if used.

.nobars {
    /* Firefox: https://developer.mozilla.org/en/docs/Web/CSS/overflow */
    /* overflow: -moz-scrollbars-none; (no longer works) */
    /* IE: https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx */
    -ms-overflow-style: none;
}
.nobars::-webkit-scrollbar {
    /* Chrome: 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-scrollbar-y-rail {
  display: none !important;
}

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

<link rel="stylesheet" href="css/perfect-scrollbar.min.css">
<style>
  #container {
    position: relative; /* can be absolute or fixed if required */
    height: 200px; /* any value will do */
    overflow: scroll;
  }
  .ps-scrollbar-y-rail {
    display: none !important;
  }
</style>
<script src='js/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");
  Ps.initialize(container);
  //Ps.update(container);
  //Ps.destroy(container);
</script>
Answer

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.

Answer

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.

Answer

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));
});
Answer

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

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.