Hide Scrollbars While Keeping Scrolling Intact.

Scrollbars are essential for navigation, but they can sometimes clutter a clean UI — especially in modern web designs. Whether you're building a sleek dashboard, a minimalistic modal, or a horizontally scrolling container, hiding scrollbars while keeping scrolling intact can enhance the user experience. In this post, we'll explore different CSS techniques (including Tailwind-friendly solutions) to achieve this effect without breaking functionality.

When and Why Should You Hide Scrollbars?

While scrollbars provide essential visual feedback for navigation, there are cases where they might not be necessary — or even unwanted. Here are some scenarios where hiding scrollbars makes sense:

• Minimalist UI Design – If your design prioritizes a clean, uncluttered look, visible scrollbars can feel distracting. Hiding them ensures a more polished appearance.
• Custom Scroll Experiences – When implementing a custom scrolling effect (e.g., momentum scrolling, horizontal scrolling galleries), the default scrollbar may not align with the intended design.
• Overflowing Content in Small Containers – Elements like modals, dropdowns, or side panels often require scrolling but don't need a visible scrollbar taking up space.
• Consistent Styling Across Browsers – Scrollbars can look different depending on the browser and operating system. Hiding them ensures a more uniform experience across platforms.
• Embedding External Content – When embedding iframes or third-party widgets, the scrollbar might not match the rest of your site's style, making it a good candidate for hiding.

While hiding scrollbars can improve aesthetics, it's important to maintain accessibility — ensuring that users can still scroll using trackpads, touch gestures or keyboard navigation.

Using CSS

Hiding scrollbars while keeping scrolling functional can be done using just CSS, you can use the following code:

/* 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 */
}

Using TailwindCSS

In TailwindCSS 4, you can define custom utilities using the @utility directive. This allows you to extend Tailwind with reusable styles while keeping everything within the utility-first approach.
Add the following to your CSS:

@utility hide-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }

  -ms-overflow-style: none;
  scrollbar-width: none;
}

The Proof Is in the Pudding 🍮

Seeing is believing! Below is an interactive demo where you can toggle the hide-scrollbar class on a horizontal scrolling gallery. This allows you to see the difference between having the scrollbar hidden and visible.

Wrapping It Up: Scrollbars Be Gone! 🎩✨

And there you have it — scrollbars that exist but remain unseen, like a front-end magician's best trick. Whether you're building a sleek UI, a horizontal gallery, or just want to impress your team with a clean design, hiding scrollbars while keeping scrolling intact is a simple but powerful technique.

So go forth and declutter those UIs! Just remember: with great power comes great responsibility — don't leave your users wondering why they can't scroll. 🚀