Among the many ways to hide it, the most common is the overflow and webkit-scrollbar properties.
Here are some practical examples in which we will hide the scroll bar using these properties.
All right let’s get started!
Hide Scroll Bar Using Overflow Property in CSS
The “overflow” property determines how content will look when it overflows from the content box, for instance, by clipping, displaying scroll bars, or displaying outside the box.
Syntax
In CSS, the overflow property has the following syntax:
In the place of value, we can set different values/parameters of overflow properties such as visible, hidden, scroll, auto, and inherit. Assign the “hidden” value to the overflow property to hide the scroll bar.
Here is a practical example that illustrates this concept in a better way.
Example: How to Hide Scroll Bar in CSS Using Overflow Property?
Let’s create a paragraph inside the <body> using the <p> tag as follows:
<p>
We scroll up-down and left-right of the webpage while browsing the web by using the scroll bar that appears vertically and horizontally. In HTML it appears by default. Using CSS we can set attributes of the scroll bar as per our choice i.e width of the scroll bar and colour also. We also hide the scroll bar, using CSS.
Among the many ways to hide it, the most common are the Overflow, scrollbar-width, and Webkit-scrollbar properties.
</p>
</body>
The outcome of the given code will be:
Here, we can see that the scrollbar is appearing vertically. Let’s use the CSS overflow property to hide it.
In CSS, write the following code and set the overflow property to “hidden”:
overflow: hidden;
}
As a result, the scroll bar will disappear from the page:
We can see that the scrollbar has been removed, but the functionality of the scrollbar is also disabled. However, by using CSS, we can hide the scrollbar without disabling its functionality.
Hide Scroll Bar in CSS Using “webkit-scrollbar” property
The “webkit-scrollbar” pseudo-element can be used to style the scrollbar of an element in CSS. It also assists us in hiding the scrollbar. This property works only on Webkit-based browsers, such as Chrome, Opera, Safari, Edge, etc.
Syntax
To understand the webkit property, we must first understand its syntax:
/*display, width, style */
}
webkit has the following elements that serve different functionalities some are:
- webkit-scrollbar: It is used to modifying entire scroll bar.
- webkit-scrollbar-button: It is used to modify the up-down left-right buttons of the scroll bar.
- webkit-scrollbar-track: It is used to modify the track of scrolling.
- webkit-scrollbar-thumb: It is used to modify the draggable scrolling handle.
- webkit-resizer: It is used to resize or modify a draggable handle.
To hide the scroll bar, the “webkit-scrollbar” pseudo-element is used.
Example: How to Hide Scroll Bar in CSS Using webkit Property?
To hide the scroll bar using the “webkit-scrollbar” property, set the value of the display to “none” as below:
display: none;
}
Now, in the web page, we can scroll through the long webpage without seeing the scrollbar:
The scrollbar has been hidden, and you can scroll through the browser content using the up-down keys.
Conclusion
The CSS “overflow” and “webkit” properties allow us to hide the scrollbar from the webpage. The overflow property disables the functionality of the scrolling as well; however, the webkit property allows scrolling with the help of arrow keys. This write-up explained how overflow property and webkit property work in CSS.
