How to hide scrollbars with CSS?
The Scrollbars are used to scroll through the contents of the webpage which are larger than the available display area. The scrollbar is used to provide horizontal and vertical scrolling. The scrollbar consists of a shaded scroll box with an arrow button.
In this tutorial, we will learn to remove this scrollbar but still be able to keep scrolling the page using CSS.
CSS properties to hide the scrollbar
The overflow:hidden property is used to hide the horizontal and vertical scrollbar but it will also remove the functionality of the scrollbar too. To be able to scroll by hiding the scrollbar we use the following CSS.
- Browsers like Chrome, safari, and opera uses
::webkit-scrollbar element, to modify the scrollbar property of the webpage. Use display:none property within it to hide it.
- Whereas
-ms-overflow-style: and scrollbar-width property is used to hide scrollbar in IE and Edge browsers.
Example: Hide scrollbar using CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.container {
background-color: #cccccc;
width: 300px;
height: 200px;
border: 2px solid black;
overflow-y: scroll; /*Enabling the scroll for verical direction */
}
.container::-webkit-scrollbar {
display: none;
}
.example {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body>
<div class="container">
<h2> Hiding the scrollbar </h2>
<h3> Scroll Here </h3>
<h3> Scroll Here </h3>
<h3> Scroll Here </h3>
<h3> Scroll Here </h3>
<h3> Scroll Here </h3>
<h3> Scroll Here </h3>
<h3> Scroll Here </h3>
<h3> Scroll Here </h3>
<h3> Scroll Here </h3>
<h3> Scroll Here </h3>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example 2: Hide scrollbar Using CSS
Here is yet another way to hide the scrollbar on the webpage. Here, we have a container class with position:relative and overflow:hidden, an inner child element with position:absolute and overflow:auto. Other properties are used to style the element.
Conclusion
We can hide the scrollbar without removing the scroll function using CSS. CSS provides several properties and is even browser-specific so the code works on every browser. While doing so makes sure you use the property that is compatible with all the browsers.
