Hide Scrollbars with CSS While Keeping Scrolling

You will learn the difference between hiding a scrollbar and disabling scrolling, the CSS rules needed for major browsers, and how to apply them safely to a page or a specific scrollable element.

A scrollbar is the visual control shown when an element has more content than it can display at once. In CSS, scrolling behavior is controlled primarily by the overflow property.

There are two different goals that are often confused:

• Hide the scrollbar but allow scrolling: Users can still scroll with a mouse wheel, touch gesture, keyboard, or trackpad.
• Disable scrolling completely: Extra content is clipped and cannot be reached by scrolling.

To hide a scrollbar while retaining scrolling, use browser-specific scrollbar styling rules alongside an overflow value such as auto or scroll.

This matters because scrollable content must remain reachable. Hiding the visual scrollbar can create a cleaner layout, but it can also make it less obvious that more content exists. Use this technique only when the interface still provides a clear indication that content can scroll.

Think of a scrollable area as a long document inside a window.

• overflow: auto lets you move the document when it is longer than the window.
• A scrollbar is the visible handle on the side of that window.
• Hiding the scrollbar removes the handle, not the document's ability to move.
• overflow: hidden locks the window: content outside the visible area still exists, but you cannot move to it.

So, hiding a scrollbar and turning off scrolling are separate actions.

Use a class when you want to hide the scrollbar on a particular scrollable container:

.scrollable-without-bar {
  overflow: auto;
  -ms-overflow-style: none; /* Internet Explorer and legacy Edge */
  scrollbar-width: none;    /* Firefox */
}

.scrollable-without-bar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and newer Edge */
}

<div class="scrollable-without-bar">
  <p>Long content goes here...</p>
</div>

The element must have a constrained size for scrolling to become visible. For example:

.scrollable-without-bar {
  height: 200px;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollable-without-bar::-webkit-scrollbar {
  display: none;
}

To apply this to the entire page, target the root document element:

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

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

The page remains scrollable if its content exceeds the viewport height.

Consider this scrollable panel:

<div class="news-panel">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
  <p>Item 6</p>
</div>

.news-panel {
  height: 100px;
  overflow-y: auto;
  scrollbar-width: none;
}

.news-panel::-webkit-scrollbar {
  display: none;
}

Step by step:

1. height: 100px limits the panel to 100 pixels of visible height.
2. The six paragraphs are taller than 100 pixels, so some content lies below the visible portion.
3. overflow-y: auto makes the panel vertically scrollable.
4. scrollbar-width: none hides Firefox's scrollbar.
5. ::-webkit-scrollbar { display: none; } hides the scrollbar in Chromium-based browsers and Safari.
6. The user can still scroll the panel using a wheel, touch gesture, trackpad, or keyboard when the panel has focus.

Common uses include:

• Image galleries: Let users swipe or horizontally scroll through cards without displaying a large scrollbar.
• Mobile navigation: Create a horizontally scrollable category row with a clean appearance.
• Dashboard widgets: Keep a compact activity feed scrollable inside a fixed-height panel.
• Fullscreen or kiosk interfaces: Reduce visual clutter where scrolling is already communicated by the design.
• Custom-scrolling components: Hide the native bar when the application supplies a well-tested custom scroll indicator.

For important text, forms, or data tables, a visible scrollbar is often better because it clearly communicates that additional content is available.

In real projects, developers usually avoid applying hidden-scrollbar rules globally unless the design specifically requires it. A reusable utility class is safer:

.u-hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.u-hide-scrollbar::-webkit-scrollbar {
  display: none;
}

Then combine it with explicit scrolling behavior where needed:

.product-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

<div class="product-row u-hide-scrollbar">
  <!-- product cards -->
</div>

Useful real-codebase patterns include:

• Use overflow-x: auto for a horizontal card row and avoid changing vertical page scrolling.
• Use overflow-y: auto for a fixed-height panel.
• Add a gradient edge, partial next card, arrow buttons, or instructional text so users can discover hidden content.
• Keep keyboard access in mind. A non-interactive scrolling container may need tabindex="0" when keyboard scrolling is important.
• Test on touch devices, mouse-wheel devices, and keyboard-only navigation.

Using overflow: hidden when scrolling should remain possible

/* This hides overflow and prevents scrolling. */
body {
  overflow: hidden;
}

Use overflow: auto instead when users need to reach overflowing content.

Styling only one browser family

/* Works in Chromium browsers and Safari, but not Firefox. */
.panel::-webkit-scrollbar {
  display: none;
}

Add scrollbar-width: none for Firefox.

Expecting a scrollbar without a scrollable area

.panel {
  overflow-y: auto;
}

If the panel has no height or max-height constraint, it may grow to fit all of its content and never need to scroll. Add a size constraint:

.panel {
  max-height: 20rem;
  overflow-y: auto;
}

Hiding the only clue that content can scroll

A scrollbar helps users discover content. If you hide it, provide another cue, such as a partly visible next card, an arrow control, or a fade at the edge.

Applying page-level scrolling rules to a component

Using body { overflow: hidden; } to fix a small panel can stop the entire page from scrolling. Target the component's class instead.

overflow decides whether content can scroll. Scrollbar styling decides whether the scrollbar is shown. They are commonly used together but solve different problems.

/* Hide a scrollable element's scrollbar across major browsers */
.hide-scrollbar {
  overflow: auto;
  -ms-overflow-style: none; /* Legacy Internet Explorer/Edge */
  scrollbar-width: none;    /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Chromium Edge */
}

/* Vertical-only scrolling */
.panel {
  max-height: 300px;
  overflow-y: auto;
}

/* Horizontal-only scrolling */
.row {
  overflow-x: auto;
  overflow-y: hidden;
}

• Use overflow: auto to allow scrolling only when content overflows.
• Use overflow: hidden only when content should not be scrollable.
• A container needs a width, height, max-width, or max-height constraint before overflow is likely to occur.
• Hiding the scrollbar does not automatically make a container keyboard-focusable.
• Test the result in Firefox, Safari, and a Chromium-based browser.

Can I hide a scrollbar with CSS and still scroll?

Yes. Keep overflow: auto or overflow: scroll, then use scrollbar-width: none for Firefox and ::-webkit-scrollbar for Chrome, Edge, and Safari.

Does overflow: hidden hide only the scrollbar?

No. It also prevents users from scrolling to the hidden content.

Why does scrollbar-width: none not work in Chrome?

scrollbar-width is used by Firefox. Chrome, Edge, and Safari use the ::-webkit-scrollbar pseudo-element for this purpose.

Why is my element not scrolling after I add overflow: auto?

It may not have a size constraint. Add height, max-height, width, or max-width so that its content can overflow.

Should I hide the page scrollbar?

Only if users can still clearly discover and use scrolling. Hiding it can reduce accessibility and make long pages appear to end early.

Can I hide only the horizontal scrollbar?

Yes. Use overflow-x: auto for horizontal scrolling and apply the scrollbar-hiding rules to that element. Be careful: browser scrollbar styling often affects both scrollbar directions on the same element.

Is -ms-overflow-style required for modern browsers?

It is mainly for Internet Explorer and legacy Edge. Most modern projects can omit it if they do not support those browsers.

• CSS overflow — controls whether overflowing content is visible, clipped, or scrollable.
• CSS pseudo-elements — ::-webkit-scrollbar is a browser-specific pseudo-element used to style scrollbar parts.
• Responsive design — horizontal scroll containers are often used when content cannot fit on smaller screens.
• Accessibility and keyboard navigation — hidden scrollbars can make scrollable content harder to discover and operate.
• CSS overscroll-behavior — controls scroll chaining and bounce behavior in nested scroll areas.
• Fixed and sticky layouts — these layouts often require deliberate decisions about which element should scroll.