In this short snippet, you will learn how to hide a scrollbar on a page while still allowing users to scroll through the content. To do that you will have to create a custom class and define the necessary styling for the different browsers.
For chrome you will have to specify the "::-webkit-scrollbar" display to none.
Hide Scrollbar on For Chrome
For chrome you will have to specify the "::-webkit-scrollbar" display to none.
.no-scrollbar::-webkit-scrollbar {
display: none;
}Hide Scrollbar on IE, Edge and Firefox
For Internet Explorer, Edge, and Firefox browsers you will need to specify the class with the scrollbar-width property like below.
-ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */
Full Code Implementation
The full code implementation is as follows. Do note that it's better to place this within your "/styles/app.css" directory so that later on you can easily reference it from within the head tag of your HTML.
/** hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
/** hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}Applying the class above in the HTML will be as follows.
<!doctype html> <html> <head> <!-- ... --> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="/styles/app.css" rel="stylesheet"> </head> <body> <div class="no-scrollbar">Your long content here...</div> <!-- ... --> </body> </html>
Leave a reply