Hiding the scrollbar on an HTML page

Question

Can CSS be used to hide the scroll-bar? How would you do this?

Answer 1

As the other people already said, use CSS overflow.

But if you still want the user to be able to scroll that content (without the scrollbar being visible) you have to use JavaScript. Se my answer here for a solution: hide scrollbar while still able to scroll with mouse/keyboard

Answer 2

Just thought I'd point out to anyone else reading this question that setting overflow: hidden (or overflow-y) on the body element didn't hide the scrollbars for me. I had to use the HTML element.

Answer 3

You can use the CSS property overflow and -ms-overflow-style with a combination with ::-webkit-scrollbar.

Tested on IE10+, Firefox, Safari and Chrome and works good:

.container {
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

This is a much better solution than the others when you hide the scrollbar with padding-right, because the default scrollbar width is different on each browser.

Note: In the latest versions of Firefox the -moz-scrollbars-none property is deprecated ( link ).

Answer 4

If you're looking for a solution to hide a scrollbar for mobile devices, follow Peter's answer!

Here's a jsfiddle, which uses the solution below to hide a horizontal scrollbar.

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

Tested on a Samsung tablet with Android 4.0.4 (both in the native browser & Chrome) and on an iPad with iOS 6 (both in Safari & Chrome).

Answer 5

WebKit supports scrollbar pseudo elements that can be hidden with standard CSS rules:

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

If you want all scrollbars hidden, use

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

I'm not sure about restoring - this did work, but there might be a right way to do it:

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

You can of course always use width: 0, which can than be easily restored with width: auto, but I'm not a fan of abusing width for visibility tweaks.

Update: Firefox 64 now supports the experimental scrollbar-width property by default (63 requires a config flag to be set). To hide the scrollbar in FF64:

#element {
    scrollbar-width: none;
}

To see if your current browser supports either the pseudo element or scrollbar-width, try this snippet:

.content {
  /* These rules create an artificially confined space, so we get 
     a scrollbar that we can hide. They are not directly involved in 
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;
  
  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar { 
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

---

(Note that this is not really a correct answer to the question because it hides the horizontal bars as well, but that's what I was looking for when Google pointed me here, so I figured I'd post it anyway.)

Answer 6

I believe you can manipulate it with the overflow CSS attribute, but they have limited browser support. One source said it was IE5+, Firefox 1.5+, and Safari 3+ - maybe enough for your purposes.

This link has a good discussion: http://www.search-this.com/2008/03/26/scrolling-scrolling-scrolling/