How to Hide Scrollbars using CSS
In this example, we will see how to hide scrollbars using CSS. We will be using overflow property in the body element of the document.
Prerequisites
Example
HTML
<body>
...HTML codes
</body>
CSS
body {
overflow: hidden;
}
Output
Here, on the left side are normal scrollbars displayed by default when the content overflows the viewport of the browser. By applying overflow: hidden on the body element, the scrollbars are hidden as shown on the right side of the output above. We can also hide the vertical scrollbars only or horizontal scrollbars only using overflow-y: hidden and overflow-x: hidden .
Conclusion
In this example, we learned how to hide scrollbars using CSS. We used the overflow: hidden property in the body element of the document to hide both horizontal and vertical scrollbars. We can also use overflow-x: hidden and overflow-y: hidden to hide only the horizontal scrollbar or only the vertical scrollbar.