How to hide scrollbar

Learn how to hide scrollbars using CSS.

How to hide scrollbar

Add overflow: hidden;, which can hide both horizontal and vertical scrollbars at the same time.

Example

body {
  overflow: hidden; /* Hide scrollbars */
}

Try it yourself

To hide only the vertical scrollbar or only the horizontal scrollbar, use overflow-y or overflow-x:

Example

body {
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}

Try it yourself

Please note thatoverflow: hidden It will also delete the functionality of the scrollbar. Scrolling within the page is not possible.

Hide scrollbar while retaining functionality

To hide the scrollbar while still allowing scrolling, you can use the following code:

Example

/* Hide scrollbar for Chrome, Safari, and Opera */
.example::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge, and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Try it yourself

Webkit browsers (such as Chrome, Safari, and Opera) support non-standard ::-webkit-scrollbar pseudo-element, which allows us to modify the appearance of the browser scrollbar. Supported by IE and Edge -ms-overflow-style: property, supported by Firefox scrollbar-width Properties, which allow us to hide the scrollbar while retaining its functionality.

Related pages

Tutorial:Transbordamento CSS

Manual de referência:Propriedade overflow CSS