How to hide the scrollbar using CSS?

In this post, aside from hiding the scrollbar, I will also show you a couple of related things. You can check the topics in the table of contents.

How to make the scrollbar hidden?

You can make the scrollbar hidden using the overflow property. See the CSS below.

CSS

body{
  overflow: hidden;
}

The above CSS will hide the scrollbars (both vertical & horizontal).

See everything in action

How to hide the horizontal scrollbar?

To hide the horizontal scrollbar, you need to deal with overflow in the x-axis (horizontal direction). See the CSS below.

CSS

body{
    overflow-x: hidden;
}

How to hide the vertical scrollbar?

The following (below) CSS will hide the vertical scrollbar.

CSS

body{
    overflow-y: hidden;
}

Note that overflow-y: hidden will also prevent you from scrolling.

Do you need to hide the scrollbar & want to scroll? See the next section.

How to hide the scrollbar and allow scrolling

In this case, we can apply a simple trick. This is a two-step process.

In the first step, you can tell the web browser to enable scrolling. And in the second step, you can make the scrollbar’s width “0” (zero).

See the two lines of CSS below.

CSS

body {overflow: scroll;}
::-webkit-scrollbar {width: 0;}

OR

html {overflow: scroll;}
::-webkit-scrollbar {width: 0;}

It’s always good practice to add CSS vendor prefixes to make it work on all web browsers. If you are using the Autoprefixer extension with SASS, then you don’t have to add vendor prefixes manually. Otherwise, use the Autoprefixer online tool or write them manually.

Learn more about the scrollbar

• How to style the scrollbar using CSS?
• How to hide the scrollbar using CSS?
• How to make an HTML table scrollable?
• How to make a div scrollable using CSS?

Conclusion

In this post, I tried to answer all types of questions that you may have related to hiding the scrollbar. But if you did not find the answer what you were looking for, please let me know.