Using CSS to hide scrollbars without impacting scrolling

Editor’s note: This article was last updated on 24 October 2023 to address accessibility concerns related to hiding scrollbars and to include visual examples of including, hiding, and conditional hiding scrollbars.

Scrollbars can make an otherwise elegant website look outdated, reminiscent of the 90s. Thanks to new CSS properties, it’s now possible to style and hide scrollbars without impacting the user’s ability to scroll.

The scrollbar in the browser allows the user to scroll up and down on the page without having to take their hands off the keyboard or trackpad. However, for the sake of achieving a more streamlined appearance, certain websites choose to alter, customize, or completely hide the scrollbar, either for the entire webpage or specific elements.

This guide will show you how to hide the scrollbar in popular web browsers by making use of modern CSS techniques. To get the most out of this article, you should have a basic understanding of HTML and CSS.

Reasons to hide the scrollbar

While it’s generally recommended to avoid altering or overriding default browser styles for accessibility reasons, there can be compelling justifications for hiding scrollbars.

Scrollbars appear automatically when web content exceeds the available space within the browser window. This behavior is managed by user-agent styles, which are responsible for the default browser styling.

A scrollbar provides a visual cue for scrolling using a mouse or keyboard, but it’s unnecessary in specific layout patterns, particularly those that don’t require scrolling interactions, such as a slideshow, news tickers, image galleries, etc. In such patterns, hiding the scrollbar can create a smoother interaction and eliminate distractions from the overall feature.

By hiding scrollbars, you can reclaim the space they occupy, adding to your screen’s real estate. This not only streamlines the UI but also allows for a cleaner and more spacious design.

Another common motivation for hiding scrollbars is to enhance the mobile viewing experience. On mobile devices, especially smartphones, users typically expect vertical scrolling, with no need for horizontal movement, as screens are usually tall and narrow, and content flows from top to bottom. Keeping the horizontal scrollbar hidden creates a more natural feel and reduces attention to the technical aspects of browsing.

If you’re wondering how to hide or remove these scrollbars correctly, this tutorial covers everything you should know to accomplish that.

Methods to hide the scrollbar

There are two different methods to hide the scrollbar for a webpage or a specific element within it. The first method involves setting the overflow property to hidden, which effectively hides the scrollbar:

.no-horizontal-scrollbar {
  /* Keeps the horizontal scrollbar hidden */
  overflow-x: hidden;
}

.no-vertical-scrollbar {
  /* Keeps the vertical scrollbar hidden */
  overflow-y: hidden;
}

.no-scrollbars {
  /* Keeps both the horizontal and vertical 
     scrollbars hidden */
  overflow: hidden;
}

However, this method also takes away the ability to scroll and greatly affects basic accessibility. This is where the scrollbar-specific CSS pseudo-selectors come into play, which we will briefly discuss in the next few sections.

Essential CSS properties to hide scrollbars

Apart from the overflow CSS property, you primarily need just two more CSS features to manage the appearance of scrollbars:

• -webkit-scrollbar: To target scrollbars in all WebKit-based browsers. It’s worth noting that while this method has been around for a while, it has not yet been standardized and is likely to become obsolete as the new scrollbar properties become universally adopted
• scrollbar-width: To target scrollbars in Gecko-based browsers. This property is part of the new scrollbar properties and is currently supported exclusively in Firefox

Along with these two CSS features, we will employ additional presentational CSS properties to enhance the appearance of the upcoming examples in later sections.

Each browser-rendering engine has its unique approach to managing scrollbar visibility, leading to the use of various vendor-specific CSS pseudo-selectors and properties. Let’s briefly look at them and their usage.

Hiding the scrollbar on Chrome, Edge, and other WebKit-based browsers

You can use the ::-webkit-scrollbar pseudo-selector to hide the scrollbar in Chrome, Edge, Opera, Safari, and other WebKit-based browsers. Obviously, this is currently not the standard way — it’s a vendor-specific selector that is supported by a limited category of browsers.

The -webkit-scrollbar pseudo-selector provides a wide range of options for customizing a scrollbar. You can adjust the appearance of the up and down arrows, modify the scrollbar thumb’s and track’s color, change the background, and more. In this example, we’ll focus on how to hide the scrollbar without affecting the ability to scroll:

.scrollable-content {
  height: 150px;
}

.scrollable-content::-webkit-scrollbar {
  display: none;
}

See the Pen
Hiding the vertical scrollbar by Rahul (@_rahul)
on CodePen.

As you can see in the above demo, the scrollbar is hidden, but the page remains scrollable using both the mouse and keyboard. Note that this demo covers the hidden scrollbars in Chrome, Edge, and WebKit-based browsers only.

Microsoft web browsers

Browsers developed by Microsoft also support the ::-webkit-scrollbar pseudo-selector for adjusting scrollbar visibility and other appearance properties.

If you prefer not to use the -webkit-scrollbar pseudo-selector, you can use the -ms-overflow-style property to control the scrollbar visibility. Note that this property is specific to Microsoft Edge and Internet Explorer, and won’t function in other browsers:

.scrollable-content {
  -ms-overflow-style: none;
} 

Gecko-based browsers

For Gecko-based browsers like Firefox, you have the option to use the scrollbar-width property to control the scrollbar visibility. This CSS property is expected to be available in other browser engines soon and may become the standard method for controlling the visibility and width of scrollbars with CSS:

.scrollable-content {
  scrollbar-width: none;
}

Here’s an implementation using all the pseudo-selectors and properties discussed above, which makes this example functional on all modern web browsers that implement WebKit, Edge, or Gecko rendering engines:

See the Pen
Untitled by Rahul (@_rahul)
on CodePen.

While this approach might appear sophisticated to developers, it doesn’t really offer any visual cues or indications to users regarding the presence of additional content below the current view. This lack of clarity can potentially result in a significant accessibility issue.

Conditionally hiding the scrollbar

If there is a specific section on your website with scrollable content, maintaining a visible scrollbar is advantageous for both usability and accessibility. However, as discussed earlier, a constantly visible scrollbar can compromise the aesthetics of your site’s UI in certain cases.

In such situations, you can make the scrollbar visible only upon hovering. This implies that if the target section is not in use, the scrollbar remains hidden.

Take the following implementation as an example, featuring a vertically scrollable element. The markup part is straightforward and doesn’t directly affect the presentation or functionality of the scrollable element:

<div class="scrollable-content">
  ...
  <!-- Place some content here. -->
</div>

In the CSS part, constraining the height of the .scrollable-content div and hiding its overflow establish the foundation for making it truly scrollable. While this may initially result in an unpolished appearance, we can enhance its visual appeal by incorporating additional CSS properties. I’m focusing on the essential CSS properties in the code below:

.scrollable-content {
  max-width: 450px;
  max-height: 375px;
  overflow-y: hidden;
  /* More presentational CSS */
}

Now, changing the vertical overflow to scroll upon hover will ensure that the scrollbar appears only when the user intends to use the .scrollable-content section. To provide a seamless user experience, we should extend this functionality beyond just hovering.

By incorporating the :active and :focus pseudo-classes, users can utilize the mouse wheel to scroll up and down the scrollable element:

.scrollable-content:hover,
.scrollable-content:active,
.scrollable-content:focus {
  overflow-y: scroll;
}

See the Pen
Scrollable Elements w/ CSS by Rahul (@_rahul)
on CodePen.

As evident in the example above, hovering triggers the appearance of the vertical scrollbar but also introduces a slight text and layout shift within the scrollable element. This occurs because the browser adjusts the scrollable element to accommodate the vertical scrollbar. This adjustment may disrupt the overall visual flow.

To eliminate this shift and achieve a smoother scrollbar appearance, you can integrate the scrollbar-gutter CSS property, which essentially prepares the element for potential layout adjustments caused by scrollbars.

By setting the value to stable, the scrollbar-gutter property will pre-adjust the element only from the edge where the scrollbar is intended to be added. Setting it to stable both-edges will pre-adjust it from both edges to maintain a proportional appearance:

.scrollable-content {
  ...
  scrollbar-gutter: stable both-edges;
}

For additional enhancements, you can go the extra mile and stylize the scrollbar using the scrollbar-specific pseudo-elements. Here’s a demo showcasing a scrollable element with a decorated scrollbar without any layout shifts:

See the Pen
Smart Scrollable Elements Using CSS by Rahul (@_rahul)
on CodePen.

Accessibility concerns: Is hiding the scrollbar bad for UX?

Hiding scrollbars in web design has its pros and cons. On the upside, it can make your design look clean and appealing, especially when scrollbars aren’t necessary. This approach maximizes the screen space which is great for mobile users who are accustomed to vertical scrolling and don’t usually need horizontal scrolling. Check out this guide to styling CSS scrollbars for more information.

However, hiding scrollbars on a website can pose accessibility challenges, especially for users who rely on assistive technologies. This includes individuals who use screen readers, those with limited fine motor control, or people with cognitive disabilities. When scrollbars are hidden, these users may struggle to determine if a page is scrollable or to gauge how far they‘ve scrolled.

The decision to hide scrollbars should be made carefully. When done right, it can enhance your design, but it’s crucial to strike a balance between aesthetics and user-friendliness, ensuring that your website remains accessible and usable. Consider providing hints of scrollbars or alternative scrolling methods, such as keyboard commands, or offer users the option to toggle the scrollbar on and off.

Here’s a quick demonstration showcasing both scrollbars hinting and toggling to maintain visibility. The demo implements the previously covered code examples and uses a bit of JavaScript for toggling between two different scrolling functionalities:

See the Pen
Smart and Accessible Scrollable Elements w/ CSS by Rahul (@_rahul)
on CodePen.

As an assignment, you may attempt to toggle the scrollbar visibility using a keyboard shortcut with JavaScript.

Note that hiding or showing scrollbars with CSS won’t significantly impact page load or rendering times. Using CSS to style scrollbars might require a bit more CSS, but it won’t noticeably affect load or rendering times. The same applies to hiding scrollbars with CSS. If you’re using a JavaScript library to manage the scrollbar display, I recommend doing that with CSS to reduce the overall page size and load time.

Conclusion

You now have a good grasp of hiding scrollbars with CSS while maintaining smooth scrolling and accessibility. While hiding scrollbars may be suitable for certain UI and aesthetic considerations, it’s essential to remember that keeping scrollbars visible in scrollable sections helps users easily locate and navigate content, thereby enhancing accessibility.

I hope this article has been helpful to you. See you in the next one.