Hide Scrollbar Using CSS
CSS is all about presentation. Discover how Hide Scrollbar Using CSS works to transform plain HTML into a premium user experience in the guide below.
The expression "conceal scrollbar CSS" pertains to a technique used to hide or modify the appearance of scrollbars by employing Cascading Style Sheets (CSS) on websites. This practice is often implemented to enhance the visual appeal of a website or to optimize the available space. When the content within an element surpasses the visible area determined by its height and width, internet browsers typically display scrollbars by default. Occasionally, you may want to customize the scrollbar's appearance or conceal it to achieve a specific design or improve the user experience.
How to Hide Scrollbar?
In CSS, there exist multiple choices for concealing or modifying the scrollbar appearance. Let's explore some of the common techniques:
1. Hiding the scrollbar completely:
You can employ the 'overflow' property with the 'hidden' value to hide the scrollbar. This action will render the vertical and horizontal scrollbars of the specified element unnoticeable:
.element {
overflow: hidden;
}
2. Hiding only the vertical scrollbar:
Utilize the 'overflow-y' attribute with the setting to 'hidden' to conceal the vertical scroll bar.
.element {
overflow-y: hidden;
}
3. Hiding only the horizontal scrollbar:
Utilize the 'overflow-x' attribute with a value of 'hidden' to exclusively conceal the horizontal scrollbar:
.element {
overflow-x: hidden;
}
4. Customizing the scrollbar appearance:
The '::-webkit-scrollbar' pseudo-element, which is supported by browsers using the WebKit engine such as Google Chrome and Safari, allows customization of the scrollbar's appearance:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body>
<h2>Custom Scrollbar Example</h2>
<p><strong>Note:</strong> The -webkit-scrollbar is not supported in Firefox or in Edge, prior version 79.</p>
<p>jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial</p>
<p> jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial jtp tutorial</p>
</body>
</html>
Output
NOTE: Only WebKit-based browsers support the pseudo-element '::-webkit-scrollbar'. You can utilize '::-moz-scrollbar' for Firefox. However, it's important to know that not all modern internet browsers support browser-specific CSS.
5. Hiding the scrollbar but still allowing scrolling:
Employ the '::-webkit-scrollbar' method and adjust its width to '0' in order to conceal the scrollbar while retaining the ability for users to scroll:
.element::-webkit-scrollbar {
width: 0;
}
By performing this action, the scrollbar will be concealed while preserving the scrolling functionality.
To ensure uniform functionality on different platforms, it is crucial to validate your CSS across multiple browsers as the support for customizing scrollbars may differ.
It is essential to take into account user-friendliness and conduct thorough testing of the layout as modifying or concealing scrollbars could have an effect on accessibility and the general user interaction. Furthermore, ensure the correct implementation of CSS techniques to avoid any user experience discrepancies.
