Hidden Scrollbar on Scrollable Element with CSS

In this post, we’ll show you how to hide a scrollbar while still enable scrolling on any element with CSS.

First, If you want to hide a scrollbar and show it when user scroll, just set overflow: auto. This is the most basic use case.

overflow: auto;

Now let’s take a look at all overflow values.

You’ll see there is no overflow value that will hide the scrollbar while still make it scrollable. Using overflow: hidden will disable the scroll and that’s not what we want. So we’ll need another way to hide the scrollbar. Unfortunately, there is no universal CSS property that does something like this

div {
  scrollbar-visibility: hidden; /* <--- I wish we had this one !! */
}

We’ll need to implement different CSS properties for each browser. For Firefox, we can set the scroll-bar width to none.

scrollbar-width: none; /* Firefox */

For IE, we’ll need to use -ms prefix property to define scrollbar style

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

For Chrome and Safari. We’ll have to use CSS scrollbar selector. Then apply display: none to hide it.

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

Or you can set it’s width and height to 0.

::-webkit-scrollbar { 
  width: 0;
  height: 0;
}

Implementation

We’ll need to use the CSS properties above along with overflow. Below is a snippet to hide all the scrollbars and disable horizontal scroll while allowing the vertical one.

div {
::-webkit-scrollbar { 
    display: none;  /* Chrome Safari */
}
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
  overflow-y:scroll;
  overflow-x:hidden;
}

You can test it with our demo on Codepen