Question
How to Hide the Scrollbar While Keeping Scrolling in CSS
Question
I want users to be able to scroll through the entire page without showing the scrollbar.
In Google Chrome, I tried:
::-webkit-scrollbar {
display: none;
}
However, Mozilla Firefox and Internet Explorer do not behave the same way.
I also tried:
overflow: hidden;
That hides the scrollbar, but it also disables scrolling.
Is there a way to hide the scrollbar while still allowing the page to scroll, using only CSS or HTML?
Short Answer
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.
Concept
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-scrollbarfor Chrome, Safari, and other WebKit/Blink-based browsersscrollbar-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;
}
Mental Model
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.
Syntax and Examples
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 largescrollbar-width: none;hides the scrollbar in Firefox-ms-overflow-style: none;hides the scrollbar in older IE/Edge::-webkit-scrollbartargets 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
Step by Step Execution
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
- The
.boxhas a fixed height of60px. - The content inside is taller than
60px.
Real World Use Cases
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
Real Codebase Usage
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;
}
Common Mistakes
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
Comparisons
| Technique | Hides scrollbar | Keeps scrolling | Typical use |
|---|---|---|---|
overflow: hidden | Yes | No | Clip content, prevent scrolling |
overflow: auto | No | Yes | Normal scroll behavior |
overflow: scroll | No | Yes | Always show scrolling area |
scrollbar-width: none | Yes, in Firefox | Yes | Firefox scrollbar hiding |
::-webkit-scrollbar { display: none; } | Yes, in WebKit/Blink browsers | Yes |
Cheat Sheet
/* 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: hiddendisables 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
htmlandbody.
Common cross-browser snippet
html, body {
: auto;
: none;
-ms--style: none;
}
::-webkit-scrollbar,
body::-webkit-scrollbar {
: none;
}
FAQ
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?
Mini Project
Description
Build a scrollable notes panel that keeps content accessible while hiding the native scrollbar. This demonstrates the practical difference between allowing overflow and visually hiding scrollbar controls.
Goal
Create a vertically scrollable panel whose content can still be read with wheel, touch, or keyboard scrolling, but without showing the visible scrollbar.
Requirements
[ "Create a container with a fixed height so its content overflows.", "Keep vertical scrolling enabled inside the container.", "Hide the scrollbar in Chrome/Safari, Firefox, and older IE/Edge where supported.", "Do not use JavaScript.", "Make sure the content remains readable and reachable." ]
Keep learning
Related questions
Can You Style Half a Character in CSS? Text Effects with CSS and JavaScript
Learn how to style half of a character using CSS and JavaScript, including overlay techniques for dynamic text effects.
Check If a Checkbox Is Checked with jQuery
Learn how to check whether a checkbox is checked in jQuery using the correct selector, with examples, mistakes, and practical patterns.
Convert HTML and CSS to PDF in PHP: Options, Limits, and Practical Approaches
Learn how HTML-to-PDF conversion works in PHP, why CSS support varies, and how to choose a practical approach for Linux web servers.