CSS
How to Hide Scrollbar with CSS?
The scroll bar on the right-hand side looks good on a complete web page & it plays an important part in the user experience.
However, creating a container element within the web page also shows the scrollbar that does not look that well.
So the question arises – Is there any way to hide the scrollbar with CSS?
Yes, there is a way to hide the scrollbar, which can be done with a few lines of CSS code.
Below is an example of a container div displaying with a scrollbar.
How to hide scrollbar with CSS?
When we place a container div and provide it with the weight and height, the content within the div begins to bypass the boundaries.
We have to add the CSS overflow: auto to keep the text within the div area, but doing so brings a scrollbar attached to that div.
We can hide the scrollbar with the help of the below mentioned CSS.
CSS :-
.container {
border: solid 1px red;
width: 400px;
height: 300px;
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
.container::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
HTML :-
<div class="container">
<ol>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
<li>In this section, the scrollbar is hidden.</li>
</ol>
</div>
Result :-
Conclusion
In this article, we have learned the CSS that can be used to hide the scroll bar on a web page in HTML.
Applying the CSS to the scrollbar makes it disappear however, the scrolling functionality remains the same.
I am certain this addresses your query entirely.
