Scrollbars are a standard part of any web interface. They allow users to move through content vertically or horizontally when everything doesn’t fit on the screen at once. While they’re essential, default browser scrollbars don’t always blend well with modern designs and can sometimes feel out of place in carefully styled layouts. In such cases, you might want to hide scrollbar CSS without breaking scrolling, which can help create a cleaner and more consistent user interface.
Table of Contents
Why Hide Scrollbar CSS?
In many modern layouts, especially component-based designs, visible scrollbars can add unnecessary visual noise. Hiding them can make the interface feel more focused and intentional, particularly when content is meant to flow naturally within cards, panels, or custom containers.
That said, scrollbars are also an important visual cue. Many users rely on them to know that content is scrollable. Removing them without thought can lead to confusion or missed content. The key is to hide scrollbars only where it makes sense and to ensure scrolling still feels obvious and intuitive.
Browser Compatibility Overview
Scrollbar styling isn’t fully standardized, and different browsers take different approaches. Chromium-based browsers and Safari support WebKit scrollbar pseudo-elements, and Firefox provides its own scrollbar-width property, and older Microsoft browsers rely on -ms-overflow-style.
Because of this, hiding scrollbars reliably usually means combining a few browser-specific rules rather than relying on a single CSS property.
CSS Examples for Different Browsers
Since no single solution works everywhere, here’s how scrollbar hiding is handled across major browsers.
- Chrome, Edge, Safari, and Opera (WebKit-Based Browsers). These browsers support the
::-webkit-scrollbarpseudo-element.
.container::-webkit-scrollbar {
display: none;
}This hides the scrollbar while allowing the content to be scrollable.
- Firefox: Firefox uses the
scrollbar-widthproperty:
.container {
scrollbar-width: none;
}Setting the value to none remove the scrollbar without disabling scrolling.
- Internet Explorer and Legacy Edge: Older Microsoft browsers
rely on -ms-overflow-style:
.container {
-ms-overflow-style: none;
}- Cross-Browser Solution (Recommended): For consistent behavior across browsers, combine all of the above:
.container {
overflow: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE & Legacy Edge */
}
.container::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}Code Pen example:
Disable Scrolling Using CSS
Sometimes you don’t want to hide the scrollbar; you want to stop scrolling altogether. This is common when opening modals or full-screen overlays.
body {
overflow: hidden;
}This prevents scrolling on the entire page.
Axis-Specific Scrollbars
CSS also allows you to control scrolling on a single axis.
Disable vertical scrolling
.container {
overflow-y: hidden;
}Disable horizontal scrolling
.container {
overflow-x: hidden;
}This can be useful in layouts where only one scroll direction should be allowed.
Check out the best free laravel template – Materio
This free Material Design Dashboard is one of the best resource for developing engaging web apps.
Mobile-Only Solutions
Mobile browsers handle scrollbars differently from desktop environments. If needed, you can hide scrollbars only on smaller screens using media queries while leaving desktop behavior unchanged.
@media (max-width: 768px) {
.container {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE & legacy Edge */
}
.container::-webkit-scrollbar {
display: none; /* Chrome, Safari */
}
}This keeps desktop scrolling behavior intact while adjusting the experience on mobile devices.
UX & Accessibility Considerations
Hiding scrollbars can affect usability, especially for users who rely on visual cues or keyboard navigation to understand that content is scrollable. When scrollbars are hidden, scrolling must remain fully functional, and additional visual hints such as spacing, shadows, or clipped content can help signal that more content is available.
Scrollbars should generally remain visible in areas where precise navigation or content discovery is critical. As always, it’s important to test hidden-scrollbar implementations with keyboard navigation and assistive technologies to ensure nothing becomes inaccessible.
Conclusion:
Hiding scrollbars with CSS can be a useful technique for creating cleaner, more modern interfaces, but it’s not a one-size-fits-all solution. Browser differences mean that a careful, cross-browser approach is required, and developers should be clear about when to hide scrollbars versus when to disable scrolling entirely.
When applied thoughtfully and with accessibility in mind, hidden scrollbars can enhance the visual experience without compromising usability.
