How to Hide the Scrollbar with CSS: Techniques and Use Cases

The browser‘s scrollbar is an important UI control that allows users to navigate up and down a page or scrollable element. However, there are certain scenarios where you may want to hide the scrollbar for design reasons, while keeping scrolling functionality intact. Alternatively, you may need to hide the scrollbar and disable scrolling altogether on certain elements.

In this post, we‘ll cover multiple CSS techniques for hiding the scrollbar in different ways. We‘ll look at cross-browser compatibility, provide code examples, and discuss the user experience implications to consider when hiding this interface element. Let‘s dive in.

Hiding the Scrollbar While Allowing Scrolling

To hide the scrollbar but still allow the user to scroll, we need to combine a few browser-specific CSS properties:

element {
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll; 
}

element::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

Let‘s break this down:

-ms-overflow-style: none; targets Microsoft browsers like Internet Explorer and Edge. Setting the value to none hides the scrollbar.

scrollbar-width: none; is the equivalent property for Firefox to hide the scrollbar.

overflow-y: scroll; allows vertical scrolling when the content exceeds the height of the element. The scrollbar is not visible, but scrolling is possible using the mouse wheel, trackpad, or keyboard.

::-webkit-scrollbar is a pseudo-element that allows styling the scrollbar for Webkit browsers like Chrome, Safari, and newer versions of Opera. By setting display: none; the scrollbar is hidden for these browsers.

You can apply these rules to the <body> element to hide the scrollbar on the entire page, or to a specific scrollable container like a <div>.

Here is a complete cross-browser example that hides the page scrollbar but preserves scrolling:

See the Pen
Hide page scrollbar but allow scrolling by HubSpot (@hubspot)
on CodePen.

And here is an example applying the scrollbar hiding CSS only to a specific <div> element:

See the Pen
Hide scrollbar on div but keep scrolling by HubSpot (@hubspot)
on CodePen.

Hiding the Scrollbar and Disabling Scrolling

In some cases, you may want to not only hide the scrollbar but also prevent scrolling entirely. This can be achieved with the overflow: hidden; property.

When applied to an element, overflow: hidden; clips any content that exceeds the dimensions of its container. No scrollbars are displayed, and scrolling is disabled on that element.

Here‘s an example that prevents scrolling on the whole page:

See the Pen
Hide scrollbar and disable page scroll by HubSpot (@hubspot)
on CodePen.

To hide the scrollbar and disable scrolling only on a particular element, apply overflow: hidden; to that element instead:

See the Pen
Hide scrollbar and disable scroll on div by HubSpot (@hubspot)
on CodePen.

Disabling Only Vertical or Horizontal Scrolling

By default, overflow: hidden; disables scrolling in both vertical and horizontal directions. If you only want to prevent scrolling in one direction, you can use the overflow-x or overflow-y properties.

To hide the vertical scrollbar and disable vertical scrolling only:

element {
  overflow-y: hidden;
}

And to hide the horizontal scrollbar and disable horizontal scrolling only:

element {
  overflow-x: hidden;
}

Here are live examples of each:

See the Pen
Disable vertical scrolling only by HubSpot (@hubspot)
on CodePen.

See the Pen
Disable horizontal scrolling only by HubSpot (@hubspot)
on CodePen.

Hiding the Scrollbar Until User Scrolls

Completely hiding the scrollbar can negatively impact usability, as most users rely on the scrollbar to determine how much content remains outside their viewport. A scrollbar also provides a visual cue that an element is scrollable.

A good compromise is to keep the scrollbar hidden by default, but display it when the user starts scrolling. This provides a cleaner look while still offering visual feedback during active scrolling.

To achieve this, use the overflow: auto; property:

element {
  overflow: auto;
}

overflow: auto; displays a scrollbar only when the element‘s content overflows its dimensions. The scrollbar remains hidden until the user scrolls with their mouse wheel, keyboard arrows, or by clicking and dragging the scrollbar.

Here‘s a demo:

See the Pen
Show scrollbar on overflow only by HubSpot (@hubspot)
on CodePen.

This is generally the most user-friendly way to minimize the visual presence of the scrollbar without impacting functionality or discoverability.

Scrollbar Styling and Accessibility

Beyond showing and hiding, you can also customize the appearance of the scrollbar using vendor-specific pseudo-elements like ::-webkit-scrollbar. This allows you to change the width, background, and colors of the scrollbar to match your site design.

However, keep in mind that dramatically changing the default scrollbar style or hiding it altogether can cause accessibility issues. Some users may have difficulty using or recognizing custom styled scrollbars.

Make sure to clearly indicate that content is scrollable through other visual patterns, and always test your custom scrollbar design with real users to validate its usability.

JavaScript Methods for Scrollbar Manipulation

In addition to the pure CSS techniques covered here, you can also control the scrollbar via JavaScript. JS provides properties like Element.scrollTop and methods like Element.scrollTo() to manage scroll position and behavior programmatically.

This is useful for building more advanced scrolling experiences like infinite scroll, smooth scrolling to anchors, or dynamically showing/hiding the scrollbar based on certain user events.

Conclusion

There are multiple ways to hide the scrollbar using CSS, each with different implications for functionality and user experience:

  • To hide the scrollbar but keep scrolling, use a combination of overflow, ::-webkit-scrollbar, -ms-overflow-style, and scrollbar-width properties
  • To hide the scrollbar and disable scrolling completely, use overflow: hidden;
  • To hide vertical or horizontal scrollbars only, use overflow-x: hidden; or overflow-y: hidden;
  • To hide the scrollbar until the user starts scrolling, use overflow: auto;

Always consider the accessibility and discoverability tradeoffs of hiding the scrollbar. In many cases, visually minimizing the scrollbar with overflow: auto; provides the best balance between style and usability.

With these CSS techniques in your toolkit, you can take control of the scrollbar to create more seamless, intentional, and user-friendly scrolling experiences. Happy styling!

Similar Posts