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:

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

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

This works because:

• overflow: auto keeps scrolling available when needed
• scrollbar-width: none hides the scrollbar in Firefox
• -ms-overflow-style: none hides it in older Microsoft browsers
• ::-webkit-scrollbar targets Chrome/Safari-style engines

To apply this to the whole page, you can target the page scrolling element:

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

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

In some layouts, developers also apply it to body:

body {
  margin: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

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 100px.
3. Because of overflow: auto, the browser creates a scrollable area.
4. Normally, a scrollbar would appear.
5. In Firefox, scrollbar-width: none hides that scrollbar.
6. In older IE/Edge, -ms-overflow-style: none hides it.
7. In Chrome/Safari, ::-webkit-scrollbar { display: none; } hides it.
8. The content is still larger than the box, so users can still scroll with:
   • mouse wheel
   • trackpad gestures
   • touch scrolling
   • keyboard navigation in some cases

If you changed overflow: auto to overflow: hidden, step 3 would change completely: the extra content would be clipped and scrolling would stop.

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 {
  display: none;
}

Then it can be added wherever needed:

<div class="sidebar hide-scrollbar"></div>

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.

Broken example:

body {
  scrollbar-width: none;
}

If .content-panel is the actual scroll container, this will not help.

Fix: apply the CSS to the element that has overflow: auto or overflow: scroll.

4. Hiding scrollbars without considering usability

If there is no visible scrollbar, users may not know content is scrollable.

How to avoid this:

• hide scrollbars only where the interaction is obvious
• add visual hints
• test on desktop and mobile

5. Forgetting axis-specific overflow

If you only want vertical scrolling, be explicit:

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

This prevents unwanted horizontal movement.

Another useful comparison:

In most modern projects, the best approach is:

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

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

/* 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.