DEV Community

loading...
Cover image for How to hide scrollbar from any HTML element

Hide Scrollbar CSS How to hide scrollbar from any HTML element

ashwamegh profile image Shashank Shekhar Updated on ・2 min read

Use CSS to hide the scrollbar

There are times when we need to hide the scrollbar from the HTMl elements. The uses can vary from person to person. It is opinionated topic to keep the scrollbar or not based on User Interactions(UI)/User Experience(UX).

Most of the time, I don't like to show the scrollbar to the user because of design practices I follow.

To achieve this, you just need to tickle with CSS to add some pseudo selectors for hiding it based on Browser's stylings

Let's see the default UI for scroll elements which will show the scrollbar.

We will declare a div which will contain a list of items and then we will apply some CSS to provide max-width and max-height to see the scroll behaviour.

<!-- Element that contains scrollbar -->
<div class="scroll-show">
    <ul>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
      <li>Some Value</li>
    </ul>
  </div>
Enter fullscreen mode Exit fullscreen mode
.scroll-show ul {
  max-height: 100px;
  max-width: 200px;
  overflow: auto;
  border: 2px solid #f3f3f3;
  padding-left: 16px;
  /* Use this rule for firefox, to hide the scrollbar */
  scrollbar-width: none;
}
Enter fullscreen mode Exit fullscreen mode

Let's see how it look in the screen

You see, browser automatically adds the scrollbar by default, but If we want to hide, we can do it.

Now, we will add some css to the element to hide the scrollbar:

We will declare a div with some other class name which will contain same number of items and then we will use the same CSS but with some extra rules to see the scroll behaviour but not see the scrollbar.

<!-- Element that contains scrollbar -->
<div class="scroll-hide">
  <ul>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
    <li>Some Value</li>
  </ul>
</div>
Enter fullscreen mode Exit fullscreen mode
.scroll-hide ul {
  max-height: 100px;
  max-width: 200px;
  border: 2px solid #f3f3f3;
  padding-left: 16px;
  overflow: auto;
  /* this will hide the scrollbar in mozilla based browsers */
  overflow: -moz-scrollbars-none;
  /* this will hide the scrollbar in internet explorers */
  -ms-overflow-style: none;
}

/* this will hide the scrollbar in webkit based browsers - safari, chrome, etc */
.scroll-hide ul::-webkit-scrollbar { 
  width: 0 !important;
  display: none; 
}
Enter fullscreen mode Exit fullscreen mode

Let's see, whether we achieved what we wanted or not

Here, you can see that, the scrollbar is no longer can be seen, but the functionality for scrolling remain intact.

Hope this helps you someway. Do comment your thoughts on anything, you would like to change or add.

Discussion (6)

pic
Editor guide
Collapse
erikaraujo profile image
Erik Araujo

That's cool, but it's worth mentioning that it doesn't work on Firefox Developer Edition 73.0b12 (64-bit), which is the one I currently use as my daily driver.

I had to open Chrome to check it out. Good work, though!

Collapse
konrud profile image
Konstantin Rouda

For Firefox you could use scrollbar-width: none; should work starting from Firefox 64.

This property accepts 3 options:
auto (default),
thin,
none

Collapse
ashwamegh profile image
Shashank Shekhar Author

Thanks Konstantin, I will update the post with this one 👍

Collapse
ashwamegh profile image
Shashank Shekhar Author

Thanks Erik for mentioning that. I would check it out on Firefox & would post if found any solution for this.

Collapse
ujalak1812 profile image
Ujala Khurram

Thanks so much. It solved my problem to hide scrollbar in a specific div.

But this didn't work for my firefox version, So, I used


.specific-div {
  scrollbar-color: transparent transparent;
}

Enter fullscreen mode Exit fullscreen mode

It hid the scrollbar keeping the scroll functionality intact.

Collapse
ashwamegh profile image
Shashank Shekhar Author

Great to know, it has helped you 👍