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

Asked 25/8, 2009 at 7:27 Answered 27/5, 2015 at 0:10

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?

Factitive answered 25/8, 2009 at 7:27 Comment(2)

I answered the same here on this link. I hope it will be helpful for someone. – Chiffchaff 17/6, 2014 at 5:41

github.com/lsvx/hide-bars – Mothering 7/7, 2014 at 7:7

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

Homoio answered 25/8, 2009 at 8:32 Comment(3)

I'm having trouble getting this to work if you want to hide the scrollbars on the BODY, and then bind the mousewheel to body scroll. – Oraorabel 19/12, 2012 at 4:55

@DavidBarnes hm looks like a lot of things got outdated after 3 years. I had to get the updated mousewheel plugin from github, and to get scrolling to work, I had to bind to document instead of body. here's my example: pastebin.com/U08b6MCx – Homoio 19/12, 2012 at 19:21

comment from @radry: The solution suggested in the top answer doesn't work anymore, even the "update" comment doesn't. At least my mousewheel does nothing. How to solve this in the year 2014? – Overcharge 13/9, 2014 at 19:34

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>

Stu answered 21/11, 2012 at 18:46 Comment(4)

I see what you mean. You could create a background behind it separately to fix this problem and make it the same size as the scrolling <div>. – Stu 3/12, 2012 at 17:14

It seems like -moz-scrollbars-none actually disables scrolling. Or is there a way to combine it with overflow:auto somehow? – Duarte 10/12, 2016 at 0:49

This used to work, presumably that's no longer the case. Looks like Javascript is the only option until this is added to Firefox :( – Stu 10/12, 2016 at 16:56

@Duarte Added a 3rd method, which relies on JS but not jQuery. The other solutions may still be useful in some cases. – Stu 10/12, 2016 at 18:30

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.

Udell answered 28/4, 2015 at 17:11 Comment(2)

Yeah, but it doesn't work in other browsers. As far as I'm aware, currently, only webkit browsers allow customizing scrollbars. Do you know a cross-browser solution like this? – Legibility 10/8, 2015 at 12:38

@TheLightSabrix you may be interested in my IE, Chrome and Firefox answer above (see solution 2). I didn't bother researching any other browsers, comment if you'd like me to try any in particular. – Stu 22/6, 2016 at 16:38

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.

Carborundum answered 22/5, 2012 at 15:42 Comment(1)

Great suggestion, but not for Mac, as they don't have scrollbars – Allanadale 28/11, 2015 at 0:43

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

Scrutator answered 5/3, 2011 at 15:38 Comment(1)

Awesome. In my case, it was overflow-x: hidden that I needed. Thanks! – Cuccuckold 29/9, 2012 at 16:49

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

Rostov answered 27/5, 2015 at 0:10 Comment(0)

-4

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

Hsinking answered 25/8, 2009 at 7:32 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags