---
title: Hide Scrollbars While Keeping Scrolling Intact
author: Victor Cobos
tags: CSS, TailwindCSS
published_at: '2025-02-13T11:11:00+01:00'
updated_at: '2025-02-13T15:38:28+01:00'
canonical_url: https://www.dotruby.com/articles/hide-scrollbars-while-keeping-scrolling-intact
---

# Hide Scrollbars While Keeping Scrolling Intact

Want to keep your UI clean by hiding scrollbars while still allowing users to scroll? In this post, we’ll explore different CSS techniques—including Tailwind-friendly solutions—to achieve a seamless scrolling experience without the visual clutter of scrollbars.

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:

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

## 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:

```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.

[hide_scrollbars demo](https://www.dotruby.com/demos/hide_scrollbars)

## 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.** 🚀