Hiding the scroll bar on an HTML page

Question

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

Answer 1

This works for me with simple CSS properties:

.container {
    -ms-overflow-style: none;  // Internet Explorer 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

For older versions of Firefox, use: overflow: -moz-scrollbars-none;

Answer 2

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 being able to scroll with mouse/keyboard

Answer 3

My HTML is like this:

<div class="container">
  <div class="content">
  </div>
</div>

Add this to your div where you want to hide the scrollbar:

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

And add this to the container

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}

Answer 4

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

Scrolling, Scrolling, Scrolling has a good discussion.

Answer 5

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

It was tested on a Samsung tablet with Android 4.0.4 (Ice Cream Sandwich, both in the native browser and Chrome) and on an iPad with iOS 6 (both in Safari and Chrome).

Answer 6

In addition to Peter's answer:

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

This will work the same for Internet Explorer 10:

 #element {
      -ms-overflow-style: none;
 }