How to hide the browser scrollbar using CSS

How to hide the scrollbar while still allowing you to scroll

Posted on August 21, 2021


The browser scrollbar can be hidden from view by applying the CSS property overflow:hidden to the body tag.

For example, suppose you have a long <div> that’s scrollable as follows:

<body>
  <div style="height:1200px;background-color:green">
    A very long DIV element
  </div>
</body>

You can hide the scrollbar from the browser by adding the overflow:hidden property to the body tag as shown below:

<body style="overflow:hidden">
  <div style="height:1200px;background-color:green">
    A very long DIV element
  </div>
</body>

Now the scrollbar will be hidden from view, but you won’t be able to scroll the browser content either.

If you want to hide the scrollbar and still enable scrolling, then you need to apply a CSS styling to the specific browser you want to affect.

To hide the scrollbar from Chrome, Safari, Edge, and Opera, you can use the pseudo-element selector :-webkit-scrollbar and set the display property to none.

Here’s the CSS syntax:

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

To hide the scrollbar from Firefox, you need to add the scrollbar-width:none property to the html tag as follows:

html {
  scrollbar-width: none;
}

Applying the CSS above to the body tag used to work on older Firefox versions, but now you need to apply the style to the html tag.

Still, if you have a container <div> with a maximum height or width property, you can apply the scrollbar-width:none property to the container element to hide the scrollbar only in that container:

Here’s an example:

<head>
  <style>
    .container {
      scrollbar-width: none;
      overflow-y: scroll;
      max-height: 300px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div style="height:1200px;background-color:green">
      A very long DIV element
      <mark>Try to scroll this one</mark>
    </div>
  </div>
</body>

Finally, if you need to support Internet Explorer, then you need to add the -ms-overflow-style:none property to the container:

body {
  -ms-overflow-style: none;
}

And that’s how you can hide the browser scrollbar using CSS.

See also:

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.