Question
I want users to be able to scroll through the entire page without showing the scrollbar.
In Google Chrome, I found this approach:
::-webkit-scrollbar {
display: none;
}
However, this does not work the same way in Mozilla Firefox or Internet Explorer.
I also tried:
overflow: hidden;
That hides the scrollbar, but it also prevents scrolling.
Is there a way to hide the scrollbar while still allowing the full 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 only the scrollbar UI. You will learn the CSS techniques used in different browsers to keep scrolling enabled while making the scrollbar invisible.
Concept
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.
Mental Model
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.
Syntax and Examples
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:
Step by Step Execution
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:
- The
.scroll-areais only100pxtall. - The inner
.contentis taller than .
Real World Use Cases
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.
Real Codebase Usage
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;
}
Common Mistakes
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.
Comparisons
| Approach | Hides scrollbar | Keeps scrolling | Notes |
|---|---|---|---|
overflow: hidden | Yes | No | Hides overflow completely and disables scrolling |
overflow: auto | No | Yes | Default practical choice when content may overflow |
overflow: scroll | No | Yes | Always creates scrollable behavior, even if not needed |
scrollbar-width: none | Yes | Yes | Firefox-specific scrollbar hiding |
::-webkit-scrollbar { display: none; } | Yes | Yes |
Cheat Sheet
/* 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: autooroverflow: scrollto keep scrolling. - Do not use
overflow: hiddenif 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.
FAQ
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.
Mini Project
Description
Build a small scrollable content panel that keeps scrolling enabled but hides the scrollbar in major browsers. This demonstrates the difference between overflow behavior and scrollbar styling in a practical component.
Goal
Create a scrollable box with overflowing content where the scrollbar is invisible but scrolling still works.
Requirements
[ "Create a container with a fixed height so content overflows.", "Allow vertical scrolling inside the container.", "Hide the scrollbar in Chrome/Safari, Firefox, and older Microsoft browsers.", "Keep the content readable and scrollable with normal input methods." ]
Keep learning
Related questions
CSS Font Scaling Relative to Container Size: %, em, rem, vw, and Responsive Text
Learn how CSS font scaling really works and how to make text responsive using %, em, rem, vw, clamp(), and media queries.
CSS Parent Selector Explained: Selecting a Parent <li> from an <a>
Learn whether CSS has a parent selector, how :has() works, and practical alternatives for styling a parent li from a child anchor.
CSS Previous Sibling Selector: What Exists and How to Work Around It
Learn whether CSS has a previous sibling selector, why it does not, and practical ways to style earlier elements using CSS alternatives.