How TO - Hide Scrollbar

❮ Previous Next ❯

Learn how to hide scrollbars with CSS.

How To Hide Scrollbars

Add overflow: hidden; to hide both the horizontal and vertical scrollbar.

Example

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

Try it Yourself »

To only hide 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 »

Note that overflow: hidden will also remove the functionality of the scrollbar. It is not possible to scroll inside the page.

Tip: To learn more about the overflow property, go to our CSS Overflow Tutorial or CSS overflow Property Reference.

Hide Scrollbars But Keep Functionality

To hide the scrollbars, but still be able to keep 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, supports the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser's scrollbar. IE and Edge supports the -ms-overflow-style: property, and Firefox supports the scrollbar-width property, which allows us to hide the scrollbar, but keep functionality.

❮ Previous Next ❯