Posts Learn Components Snippets Categories Tags Tools About
/

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

272 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>

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

Load comments for How to Hide Scrollbar and Allow User To Scroll

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components

Sponsors 👑

+ Add Yours
)