How to Hide the Scrollbar While Keeping Scrolling in CSS

By the end of this page, you will understand the difference between hiding overflow and hiding the scrollbar UI, how browser-specific scrollbar support works, and the CSS techniques used to keep scrolling enabled while making the scrollbar invisible.

Scrolling and scrollbars are related, but they are not the same thing.

• Scrolling is the ability to move through content that is larger than its container.
• The scrollbar is the visual control the browser shows to indicate that scrolling is possible.

A common beginner mistake is using:

overflow: hidden;

This does hide the scrollbar, but it also removes the ability to scroll because it clips the overflowed content.

To keep scrolling enabled, you need CSS that:

• allows overflow to remain scrollable
• hides only the scrollbar visuals

This matters in real programming when building:

• full-screen layouts
• custom carousels
• mobile-style panels
• sidebars with custom designs
• UI components where the default scrollbar does not match the design

The challenge is that scrollbar styling is not fully standardized across all browsers, so different CSS rules are often combined:

• ::-webkit-scrollbar for Chrome, Safari, and other WebKit/Blink-based browsers
• scrollbar-width: none; for Firefox
• -ms-overflow-style: none; for older Internet Explorer and legacy Edge

A common cross-browser pattern looks like this:

.scroll-container {
  overflow: auto;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE and old Edge */
}

.scroll-container::-webkit-scrollbar {
  display: none;              /* Chrome, Safari, Opera */
}

If you apply the same idea to the body or html element, you can hide the page scrollbar while keeping the page scrollable.

Think of a long document inside a drawer.

• Scrolling means you can slide the document up and down to read more.
• The scrollbar is just the small handle on the side showing your position.

Using overflow: hidden is like locking the drawer shut. The handle disappears, but now you cannot move the document.

Hiding only the scrollbar is like removing the visible handle while still letting the drawer slide normally.

Basic cross-browser pattern

.scroll-area {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-area::-webkit-scrollbar {
  display: none;
}

What this does

• overflow: auto; keeps scrolling available when content is too large
• scrollbar-width: none; hides the scrollbar in Firefox
• -ms-overflow-style: none; hides the scrollbar in older IE/Edge
• ::-webkit-scrollbar targets Chrome, Safari, and similar browsers

Example for the whole page

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

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

This attempts to hide the page scrollbar while still allowing the document to scroll.

Example for a scrollable container

<div class="panel">
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
  <p>Line 4</p>
  <p>Line 5</p>
  <p>Line 6</p>
  <p>Line 7</p>
  <p>Line 8</p>
</div>

.panel {
  width: 250px;
  height: 120px;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

The content still scrolls with a mouse wheel, trackpad, keyboard, or touch, but the scrollbar is hidden.

Consider this example:

<div class="box">
  <p>A</p>
  <p>B</p>
  <p>C</p>
  <p>D</p>
  <p>E</p>
  <p>F</p>
</div>

.box {
  height: 60px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

Step by step

1. The .box has a fixed height of 60px.
2. The content inside is taller than 60px.
3. Because overflow: auto; is set, the browser allows scrolling.
4. In Firefox, scrollbar-width: none; removes the visible scrollbar.
5. In older IE/Edge, -ms-overflow-style: none; removes the visible scrollbar.
6. In Chrome/Safari, ::-webkit-scrollbar { display: none; } hides the scrollbar.
7. The content still exists and remains scrollable.

What if you used overflow: hidden; instead?

.box {
  height: 60px;
  overflow: hidden;
}

Then:

1. Content beyond 60px is clipped.
2. No scrollbar is shown.
3. Scrolling is disabled.
4. Some content becomes unreachable.

That is why overflow: hidden; is not the correct solution for this problem.

When developers use this

Custom-designed interfaces

Apps sometimes hide native scrollbars to match a minimal visual style.

Horizontal card sliders

A row of cards may scroll sideways on touch devices, but the scrollbar is hidden for a cleaner look.

Full-screen mobile-like layouts

Some web apps mimic native mobile screens where visible scrollbars are unnecessary.

Chat panels or sidebars

A message list or navigation pane may remain scrollable while using custom visual styling.

Embedded widgets

A widget inside another page may need scrolling without showing a browser-default scrollbar that clashes with the design.

Important usability note

Hiding scrollbars can make it less obvious that content is scrollable. In real applications, developers often compensate by using:

• fade effects
• partially cut-off content
• arrows or drag hints
• touch-friendly layouts
• visible spacing cues

In real projects, developers usually do not apply scrollbar hiding everywhere by default. Instead, they use it selectively.

Common patterns

Utility class pattern

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

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

This class can be reused on any scrollable element.

Pairing with a scroll container

.scroll-y {
  overflow-y: auto;
}

<div class="scroll-y hide-scrollbar">...</div>

This separates behavior from styling.

Direction-specific scrolling

Developers often hide the scrollbar only for horizontal or vertical regions:

.gallery {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

Guarding usability

In mature codebases, teams often avoid hiding scrollbars for long text-heavy sections because discoverability matters.

Component-based styling

In design systems, a reusable scroll container component may include hidden-scrollbar support as an optional modifier rather than a default behavior.

1. Using overflow: hidden when scrolling is required

Broken code

.container {
  overflow: hidden;
}

Problem

This hides the scrollbar and prevents scrolling.

Fix

.container {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

2. Only supporting Chrome

Broken code

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

Problem

This does not cover Firefox or older IE/Edge.

Fix

Add browser-specific rules:

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

3. Forgetting to make the element scrollable

Broken code

.container {
  scrollbar-width: none;
}

Problem

If there is no overflow: auto, overflow: scroll, or overflow in the content, there is nothing to scroll.

Fix

.container {
  overflow: auto;
  scrollbar-width: none;
}

4. Applying the rule to the wrong element

For full-page scrolling, styling a nested element may do nothing if the page itself is what scrolls.

Fix

Try applying the rules to html, body, or the actual scroll container.

5. Hiding scrollbars without considering accessibility

Some users rely on visible scroll indicators.

Better approach

• hide scrollbars only where needed
• keep touch, wheel, and keyboard scrolling working
• provide visual cues that more content exists

overflow: auto vs overflow: hidden

• Use overflow: auto when content should remain reachable.
• Use overflow: hidden when extra content should be clipped and inaccessible by scrolling.

Page scrollbar vs container scrollbar

• Page scrollbar: appears when the whole document is taller than the viewport.
• Container scrollbar: appears inside a specific element like a sidebar, modal, or panel.

The same scrollbar-hiding idea works for both, but you must target the correct element.

/* Reusable cross-browser scrollbar hiding */
.hide-scrollbar {
  scrollbar-width: none;    /* Firefox */
  -ms-overflow-style: none; /* IE and old Edge */
}

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

/* Scrollable container */
.box {
  overflow: auto;
}

/* Vertical only */
.box {
  overflow-y: auto;
  overflow-x: hidden;
}

Rules to remember

• overflow: hidden disables scrolling.
• Hiding the scrollbar is different from disabling overflow.
• Cross-browser support usually needs multiple CSS rules.
• Apply the styles to the actual element that scrolls.
• For full-page scrolling, try html and body.

Common cross-browser snippet

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

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

Edge case

On some systems or browsers, scrollbar behavior depends on OS settings, overlay scrollbars, or browser implementation, so visual results may vary slightly.

Can I hide the scrollbar with CSS and still scroll?

Yes. Use overflow: auto or overflow: scroll to keep scrolling enabled, then hide the scrollbar with browser-specific CSS.

Why does overflow: hidden stop scrolling?

Because it clips overflowed content instead of making it scrollable.

Does one CSS rule work in every browser?

No. You usually combine ::-webkit-scrollbar, scrollbar-width: none, and -ms-overflow-style: none for wider support.

Should I apply this to body or html?

Apply it to whichever element is actually scrolling. For full-page layouts, developers often test both html and body.

Is hiding the scrollbar a good idea?

Sometimes, but it can hurt usability because users may not realize more content is available.

Will mouse wheel and touch scrolling still work?

Yes, if scrolling is still enabled with overflow: auto or overflow: scroll.

Can I hide only the horizontal scrollbar?

Yes. For example:

.container {
  overflow-x: auto;
  overflow-y: hidden;
}

Then apply the scrollbar-hiding rules to that container.

• overflow — Controls what happens when content is larger than its container.
• overflow-x and overflow-y — Let you control horizontal and vertical scrolling separately.
• CSS pseudo-elements — ::-webkit-scrollbar is a browser-specific pseudo-element used for scrollbar styling.
• box model — Helps explain how content, padding, and dimensions affect overflow.
• positioning and layout — Fixed heights and constrained layouts often create scrollable areas.
• accessibility — Important when hiding scrollbars because users may lose visual cues.
• responsive design — Scrollable containers often behave differently across screen sizes and devices.