How TO - Hide Scrollbar
Learn how to hide scrollbars with CSS.
How To Hide Scrollbars
Addoverflow: hidden; to hide both the horizontal and vertical scrollbar.
To only hide the vertical scrollbar, or only the horizontal scrollbar, useoverflow-y oroverflow-x:
Example
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Note thatoverflow: hidden will also remove the functionality of the scrollbar. It is not possible to scroll inside the page.
Tip: To learn more about theoverflow property, go to ourCSS Overflow Tutorial orCSS 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
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
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 thescrollbar-width property, which allows us to hide the scrollbar, but keep functionality.
