Hide Scrollbar Using CSS

The term "hide scrollbar CSS" refers to a method for hiding or altering the look of scrollbars utilizing Cascading Style Sheets (CSS) on web pages. It can be done to make a website seem better or to free up space. When content exceed the viewable area of an element with a defined height and width, browsers, by default, show scrollbars. To create a certain design or user experience, you may occasionally cover the scrollbar or alter its look.

How to Hide Scrollbar?

In CSS, there are various options for hiding or altering the scrollbar. Let's examine a few of the standard methods:

1. Hiding the scrollbar completely:

You may utilize the 'overflow' attribute with the value set to 'hidden' to conceal the scrollbar. This will make the selected element's vertical and horizontal scrollbars invisible:

.element {
  overflow: hidden;
}

2. Hiding only the vertical scrollbar:

Make use of the 'overflow-y' property with the value set to 'hidden' to hide the vertical scrollbar:

.element {
  overflow-y: hidden;
}

3. Hiding only the horizontal scrollbar:

Make use of the 'overflow-x' property with the value set to 'hidden' to hide the horizontal scrollbar solely:

.element {
  overflow-x: hidden;
}

4. Customizing the scrollbar appearance:

The '::-webkit-scrollbar' pseudo-element, compatible with WebKit-based browsers like Google Chrome and Safari, may be used to change the scrollbar's look:

<!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:

Utilize the '::-webkit-scrollbar' technique and change its width to '0' to hide the scrollbar while still allowing users to scroll:

.element::-webkit-scrollbar {
  width: 0;
}

By doing this, the scrollbar will be hidden without affecting scrolling.

To guarantee consistent behavior across platforms, it's important to test your CSS on various browsers because browser compatibility with scrollbar customization could vary.

It's crucial to consider usability and properly test the design since hiding or customizing scrollbars may impact accessibility and the overall user experience. Additionally, apply CSS methods appropriately to prevent confusion in user experience.

Next TopicHTML CSS JavaScript

← prev next →