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">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
width: 120vw;
height: 120vh;
}
</style>
<body>
<div class="container">
devmaesters
</div>
</body>
</html>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.
Conclusion
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.
