How to hide a web page scrollbar using css

Hello, welcome to to the devmaesters website. In this post I am going to be showing how you can hide the web page scrollbar but still keep its functionalities on different web browsers.

Let's say you have a simple html page with the code shown below

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        width: 120vw;
        height: 120vh;
    <div class="container">

As you can see from the code above the width and height of the body tag is set to 120vw and 120vh respectively. This is because for the purpose of this example we need the scrollbar to appear in the webpage both at the x and the y direction.

To hide the scrollbar all we need to do is to add in the code below to our styles

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

The first one ensures that the scrollbar gets hidden on Chrome, Safari and Opera web browsers while the second does the same for IE, Edge and Firefox web browsers.


From the example above we are hiding the scrollbars for the body tag, this does'nt mean we can't do the same for other html tags or classes. Just replace body tag in the css style above with any other tag or classes you want to apply the styles to. As always thanks for reading and feel free to leave any comments down below in the comment section.


Hello, my name is Abubakar Zakari. Am a budding fullstack developer from Nigeria who loves developing softwares and learning new frameworks and langauges.


Select image

No comment yet




Frontend Development |Backend Development |Full Website Development |Bootstrap Website upgrades | Website Debbugging | Website Hosting & deployment


Interested in hiring me or collaborating with me on a project, click on any of the links below to get my social media handle

Or contact me via Tel: (+234)-806-225-7480 | Email:
Privacy Policy

By using our website,
you agree that devmaesters can store cookies on your device and disclose information in accordance with our privacy policy.