How to Hide Scrollbar and Allow User To Scroll

Larn how to hide a scrollbar in a page while still allowing user to scroll

Created on Oct 17, 2021

•

275 views

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.

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>

new

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Patreon