How TO - Hide Scrollbar
Learn how to hide scrollbars with CSS.
How To Hide Scrollbars
Add overflow: hidden; to hide both the
horizontal and vertical scrollbar.
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 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 and Edge */
.example {
-ms-overflow-style: none;
}
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, which allows us to hide the scrollbar, but keep functionality.
Note: This example will not work in Firefox, as they dropped the support for hidden scrollbars without functionality (you could use overflow: -moz-scrollbars-none; in old versions).
