The browser scrollbar can be hidden from view by applying the CSS property overflow:hidden to the body tag.
For example, suppose you have a long <div> that’s scrollable as follows:
<body>
<div style="height:1200px;background-color:green">
A very long DIV element
</div>
</body>
You can hide the scrollbar from the browser by adding the overflow:hidden property to the body tag as shown below:
<body style="overflow:hidden">
<div style="height:1200px;background-color:green">
A very long DIV element
</div>
</body>
Now the scrollbar will be hidden from view, but you won’t be able to scroll the browser content either.
If you want to hide the scrollbar and still enable scrolling, then you need to apply a CSS styling to the specific browser you want to affect.
To hide the scrollbar from Chrome, Safari, Edge, and Opera, you can use the pseudo-element selector :-webkit-scrollbar and set the display property to none.
Here’s the CSS syntax:
body::-webkit-scrollbar {
display: none;
}
To hide the scrollbar from Firefox, you need to add the scrollbar-width:none property to the html tag as follows:
html {
scrollbar-width: none;
}
Applying the CSS above to the body tag used to work on older Firefox versions, but now you need to apply the style to the html tag.
Still, if you have a container <div> with a maximum height or width property, you can apply the scrollbar-width:none property to the container element to hide the scrollbar only in that container:
Here’s an example:
<head>
<style>
.container {
scrollbar-width: none;
overflow-y: scroll;
max-height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div style="height:1200px;background-color:green">
A very long DIV element
<mark>Try to scroll this one</mark>
</div>
</div>
</body>
Finally, if you need to support Internet Explorer, then you need to add the -ms-overflow-style:none property to the container:
body {
-ms-overflow-style: none;
}
And that’s how you can hide the browser scrollbar using CSS.
