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;
  : none;      
  -ms--style: none;   
}

::-webkit-scrollbar {
  : none;              
}

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 =>
  Line 1
  Line 2
  Line 3
  Line 4
  Line 5
  Line 6
  Line 7
  Line 8

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.

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

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

/* 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 {
  : auto;
  : none;
  -ms--style: none;
}

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

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?

• 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.