How to Hide Scrollbar in CSS

Use CSS scrollbar rules when you want content to stay scrollable but remove the visible scrollbar track. This works best for horizontal carousels, image strips, custom sliders, and tightly designed dashboard panels.

What you’ll build or solve

You’ll learn how to hide the scrollbar in CSS while keeping scrolling enabled. You’ll also know how to support the most common browser engines.

When this approach works best

This approach is the right choice when the scrollbar hurts the design but users can still understand that the area scrolls.

Common real-world scenarios include:

• Horizontal card carousels
• Product galleries
• Story strips
• Custom dashboard panels
• Touch-first mobile layouts

This is a bad idea when the scroll area is long or non-obvious. Users may miss hidden content if there is no visual hint that scrolling is available.

Prerequisites

You only need:

• A basic HTML file
• A scrollable container
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Hide the scrollbar while keeping overflow scrollable

Start by making the container scrollable.

<div class="carousel">
  <div class="card">USA pricing</div>
  <div class="card">UK pricing</div>
  <div class="card">France pricing</div>
</div>

<style>
  .carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
  }
</style>

Then add browser-specific scrollbar hiding rules.

<style>
  .carousel {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .carousel::-webkit-scrollbar {
    display: none;
  }
</style>

What to look for:

• overflow-x: auto keeps scrolling enabled
• scrollbar-width: none works in Firefox
• ::-webkit-scrollbar covers Chrome, Edge, and Safari
• The content should still scroll with mouse, touch, or trackpad
• Add visual hints like partial cards so users know more content exists

Examples you can copy

Horizontal course cards

<div class="courses">USA · UK · France</div>

<style>
  .courses {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .courses::-webkit-scrollbar {
    display: none;
  }
</style>

Product image strip

<div class="gallery">Image strip</div>

<style>
  .gallery {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .gallery::-webkit-scrollbar {
    display: none;
  }
</style>

Dashboard metrics row

<div class="metrics">KPI cards</div>

<style>
  .metrics {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .metrics::-webkit-scrollbar {
    display: none;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Hiding the scrollbar without enabling scrolling

What the reader might do:

.carousel::-webkit-scrollbar {
  display: none;
}

Why it breaks: the scrollbar disappears, but the content may not scroll at all.

Corrected approach:

.carousel {
  overflow-x: auto;
}

Always enable scrolling first.

Mistake 2: Hiding vertical page scrollbars

What the reader might do:

body::-webkit-scrollbar {
  display: none;
}

Why it breaks: users can lose awareness of long page content.

Corrected approach:

Hide scrollbars only on specific containers, not the full page.

Mistake 3: No visual clue that more content exists

What the reader might do:

.carousel {
  overflow-x: auto;
}

Why it breaks: users may not realize they can swipe or scroll sideways.

Corrected approach:

Leave part of the next card visible or add fade edges as a visual hint.

Troubleshooting

If the content no longer scrolls, add overflow-x: auto.

If the scrollbar still appears in Chrome, confirm the ::-webkit-scrollbar rule is applied to the exact container.

If Firefox still shows the bar, add scrollbar-width: none.

If users miss hidden content, add a visual overflow hint.

Quick recap

• Keep scrolling enabled with overflow
• Hide the scrollbar with browser-specific rules
• Support Firefox and WebKit browsers
• Hide only targeted containers
• Add visual hints so hidden content is still discoverable