Modern web design often demands sleek, minimal interfaces. Visible scrollbars, although functional, can sometimes disrupt that clean look. Fortunately, it’s possible to hide scrollbars while keeping scrolling fully intact. Whether you’re working on a dashboard, a modal, or a horizontal scroll gallery, this technique can make your UI more polished.
In this guide, we’ll walk through how to hide scrollbars using plain CSS and TailwindCSS, all while maintaining accessibility and usability.
Why Hide Scrollbars?
While scrollbars are crucial for navigation, there are specific cases when hiding them makes sense:
- Minimalist UI Design: Cleaner layouts without scrollbar distractions.
- Custom Scroll Effects: Match your scrolling behavior to the design (momentum, horizontal galleries, etc.).
- Small Containers: Modals, dropdowns, or side panels often require scrolling but don’t need visible scrollbars.
- Cross-Browser Consistency: Different browsers render scrollbars differently. Hiding them ensures uniformity.
- Embedded Content: Match third-party widgets or iframe styles to your site’s design.
⚡ Tip: Always ensure that users can still scroll via touch gestures, trackpads, or keyboard navigation to maintain accessibility!
How to Hide Scrollbars Using CSS
You can hide scrollbars while keeping scrolling functionality active with just a few lines of CSS.
/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
How to use it:
Apply the hide-scrollbar class to any element you want to hide the scrollbar on.
How to Hide Scrollbars with TailwindCSS
If you’re using TailwindCSS 4, you can easily add a custom utility for hiding scrollbars, keeping everything in line with the utility-first approach.
Here’s how you can define it:
@utility hide-scrollbar {
&::-webkit-scrollbar {
display: none;
}
-ms-overflow-style: none;
scrollbar-width: none;
}
Once added, just use the hide-scrollbar class anywhere in your markup.
🔗 For more on extending TailwindCSS, check out the official TailwindCSS documentation.
Final Thoughts: Make Your UI Cleaner 🎩✨
And there you have it! With a few simple tweaks, you can make scrollbars invisible but functional, giving your web projects a more polished, modern look.
✅ Quick Recap:
- Use pure CSS for direct control.
- Extend TailwindCSS for utility-first projects.
- Always prioritize usability and accessibility.
Remember, hiding scrollbars is like a magic trick: it’s impressive when done right but confusing when overdone. Use wisely!