Hide Scrollbars but Keep Scrolling in CSS

By the end of this page, you will understand the difference between hiding overflow and hiding only the scrollbar UI. You will learn the CSS techniques used in different browsers to keep scrolling enabled while making the scrollbar invisible.

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

• Scrolling is the behavior that lets content move when it is larger than its container.
• The scrollbar is the visual control shown by the browser to represent that scrolling area.

This distinction matters because some CSS properties disable scrolling entirely, while others only change how the scrollbar looks.

For example:

overflow: hidden;

This does not mean “hide the scrollbar only.” It means:

• clip any overflowing content
• do not allow the user to scroll to that hidden content

If your goal is to keep scrolling but remove the visible scrollbar, you need browser-specific scrollbar styling rules.

This is a common front-end styling task in:

• fullscreen layouts
• image galleries
• horizontal carousels
• custom-designed apps
• mobile-like web interfaces

Be aware that hiding scrollbars can reduce usability and accessibility, because users may not realize that more content is available.

Think of a long document inside a box.

• Scrolling is the ability to slide the document up and down inside the box.
• The scrollbar is just the handle on the side that shows where you are.

If you use overflow: hidden, you are not just hiding the handle—you are sealing the box so the rest of the document cannot be reached.

If you use scrollbar-specific CSS, you are keeping the box movable but removing the visible handle.

The usual approach is to allow scrolling normally, then hide the scrollbar differently depending on the browser.

/* Keep scrolling enabled */
.scroll-area {
  overflow: auto;

  /* Firefox */
  scrollbar-width: none;

  /* Internet Explorer and old Edge */
  -ms-overflow-style: none;
}

/* Chrome, Safari, and other WebKit/Blink browsers */
.scroll-area::-webkit-scrollbar {
  display: none;
}

Example HTML:

<div class="scroll-area">
  <p>Lots of content here...</p>
  <p>More content...</p>
  <p>More content...</p>
  <p>More content...</p>
  <p>More content...</p>
</div>

Example with a fixed-height container:

Consider this example:

<div class="scroll-area">
  <div class="content">
    Line 1<br>
    Line 2<br>
    Line 3<br>
    Line 4<br>
    Line 5<br>
    Line 6<br>
    Line 7<br>
    Line 8<br>
  </div>
</div>

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

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

What happens step by step:

1. The .scroll-area is only 100px tall.
2. The inner .content is taller than .

Hiding scrollbars while keeping scrolling is used in several real situations:

• Image or card carousels: content scrolls horizontally, but the design avoids a visible scrollbar.
• Chat panels: some interfaces prefer a clean look while still allowing message history scrolling.
• Fullscreen landing pages: designers sometimes hide the page scrollbar for a minimal visual style.
• Mobile-style web apps: scrollbars may be hidden to mimic native app interfaces.
• Embedded widgets: compact panels may scroll internally without showing browser default scrollbar styles.

Example: a horizontal card list

.cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

This keeps horizontal scrolling while removing the visual scrollbar.

In real projects, developers usually combine hidden scrollbars with careful layout decisions.

Common patterns include:

Guarding scrolling behavior

Developers explicitly choose which axis should scroll:

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

This avoids accidental sideways scrolling.

Scoping the rule

Instead of hiding scrollbars everywhere, teams often apply the rule only to components that need it:

.modal-body,
.sidebar-list,
.carousel-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

This is safer than affecting the entire page.

Combining with custom UI hints

When the scrollbar is hidden, developers may add cues such as:

• fade gradients at the edges
• arrows for carousels
• “scroll for more” text
• snap scrolling for sections

Using utility classes

In larger codebases, a reusable class is common:

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

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

1. Using overflow: hidden when you still need scrolling

Broken example:

.page {
  overflow: hidden;
}

Problem:

• the scrollbar disappears
• scrolling also stops

Fix:

.page {
  overflow: auto;
}

Then hide the scrollbar with browser-specific rules.

2. Only supporting Chrome

Broken example:

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

Problem:

• works in WebKit/Blink browsers
• does not fully cover Firefox or older Microsoft browsers

Fix:

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

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

3. Applying the rule to the wrong element

Sometimes the element that scrolls is not body, but a nested container.

/* Cross-browser hidden scrollbar, scrolling still works */
.target {
  overflow: auto;
  scrollbar-width: none;   /* Firefox */
  -ms-overflow-style: none; /* IE 10+ and old Edge */
}

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

Key rules:

• Use overflow: auto or overflow: scroll to keep scrolling.
• Do not use overflow: hidden if you still need access to overflowing content.
• Apply the styles to the actual scrollable element.
• For vertical-only scrolling:

overflow-y: auto;
overflow-x: hidden;

For page-level scrolling:

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

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

Accessibility note:

• Hidden scrollbars can make scrolling less discoverable.
• Consider visual cues if content is not obviously scrollable.

Can I hide the scrollbar with pure CSS and still scroll?

Yes. Use normal overflow such as overflow: auto, then hide the scrollbar with browser-specific CSS like scrollbar-width: none and ::-webkit-scrollbar.

Why does overflow: hidden stop scrolling?

Because it clips overflowing content and removes the ability to access it through scrolling.

Does ::-webkit-scrollbar work in Firefox?

No. Firefox uses scrollbar-width: none instead.

Can I hide the scrollbar for the whole page?

Yes. You can apply the rules to html and sometimes body, depending on which element is handling page scrolling.

Is hiding the scrollbar bad for accessibility?

It can be. Some users rely on the scrollbar as a visual clue that content continues beyond the visible area.

Should I hide scrollbars everywhere on a site?

Usually no. It is better to limit this pattern to specific UI components where the scrolling behavior is already clear.

Will users still be able to scroll with a mouse wheel or touchpad?

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

• CSS overflow — controls what happens when content is larger than its container.
• Scrollable containers — important because scrollbar styling only works on elements that can actually scroll.
• Pseudo-elements — ::-webkit-scrollbar is a browser-specific pseudo-element.
• Cross-browser CSS — needed because scrollbar styling differs between rendering engines.
• Accessibility in UI design — relevant because hiding scrollbars can affect usability.
• Horizontal scrolling layouts — a common place where hidden scrollbars are used.
• Viewport and page layout — useful when deciding whether html, body, or a nested element is the true scroll container.