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

Question

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?

I answered the same here on this [**link**](http://stackoverflow.com/a/16671476/1577396). I hope it will be helpful for someone. — Mr_Green, Jun 17 '14 at 05:41

Grace · Answer 1 · 2012-12-19T19:25:47.263

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

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. — David B, Dec 19 '12 at 04: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: http://pastebin.com/U08b6MCx — Grace, Dec 19 '12 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?_ — Taifun, Sep 13 '14 at 19:34

Peter Gordon · Answer 2 · 2022-02-12T14:55:08.530

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>

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
. — Peter Gordon, Dec 03 '12 at 17:14
It seems like `-moz-scrollbars-none` actually disables scrolling. Or is there a way to combine it with `overflow:auto` somehow? — phreakhead, Dec 10 '16 at 00: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 :( — Peter Gordon, Dec 10 '16 at 16:56
@phreakhead Added a 3rd method, which relies on JS but not jQuery. The other solutions may still be useful in some cases. — Peter Gordon, Dec 10 '16 at 18:30

score 8 · Answer 3 · answered Apr 28 '15 at 17:11

8

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.

answered Apr 28 '15 at 17:11

Baldráni

5,332
7
51
79

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? – The Light Sabrix Aug 10 '15 at 12:38
@TheLightSabrix you may be interested in [my IE, Chrome and Firefox answer](http://stackoverflow.com/a/13500027/1476989) above (see solution 2). I didn't bother researching any other browsers, comment if you'd like me to try any in particular. – Peter Gordon Jun 22 '16 at 16:38

score 7 · Answer 4 · edited May 23 '17 at 11:54

7

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.

edited May 23 '17 at 11:54

Community

1
1

answered May 22 '12 at 15:42

natevw

16,807
8
66
90

1

Great suggestion, but not for Mac, as they don't have scrollbars – dr.dimitru Nov 28 '15 at 00:43

score 4 · Answer 5 · answered Mar 05 '11 at 15:38

4

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

answered Mar 05 '11 at 15:38

Kevin Hakanson

41,386
23
126
155

Awesome. In my case, it was `overflow-x: hidden` that I needed. Thanks! – Edward Anderson Sep 29 '12 at 16:49

score 0 · Answer 6 · answered May 27 '15 at 00:10

0

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

answered May 27 '15 at 00:10

DardanM

95
8

score -4 · Answer 7 · answered Aug 25 '09 at 07:32

-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

answered Aug 25 '09 at 07:32

JP Silvashy

46,977
48
149
227

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

7 Answers7

Linked

Related