Use CSS to hide element scrollbars

How do I hide the scroll bar while still scrolling over any element?

First, if you want to hide the scroll bar and show it when the content overflows, just set the overflow: auto style. To completely hide the scroll bar, simply set overflow: hidden, but doing so will make the element content unscrollable. To date, there are no CSS rules that allow elements to hide scrollbars while still scrolling content, only by setting the scrollbar style for a particular browser.

The Firefox browser

For Firefox, we can set the width of the scroll bar to None:

scrollbar-width: none; /* Firefox */

IE browser

For IE, we need to define the scroll bar style using the -ms-prefix attribute:

-ms-overflow-style: none; /* IE 10+ */

Chrome and Safari

For Chrome and Safari, we have to use the CSS scrollbar selector and then hide it using display: none:

::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

Note: When you hide the scroll bar, it is best to set the overflow display to auto or scroll to make sure the content is scrollable.

The sample

We use the above CSS properties and overflow to implement the following example — hide the horizontal scrollbar while allowing the vertical scrollbar:

.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}