Home / Snippets / How to Hide Scrollbar and Allow User To Scroll
How to Hide Scrollbar and Allow User To Scroll cover

How to Hide Scrollbar and Allow User To Scroll

245

2 years ago

0 comments

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>
notion avatar

Ahmad Aziz

Week-end developer currently experimenting with web, mobile, and all things programming.

Topics:

Frontend

Resource

Average

Average

Support Us

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

Post Tutorials

Learn trending tutorials for ReactJs, React Native, VueJS, NextJs, Laravel, Tailwind CSS, and Flutter development.
View Tutorials

Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your web projects
View Components

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this