CssHow-ToBeginner · 3 min read

How to Hide Scrollbar in CSS: Simple Methods Explained

To hide a scrollbar in CSS, use overflow: hidden; to remove scrolling completely or use scrollbar-width: none; for Firefox and ::-webkit-scrollbar { display: none; } for WebKit browsers to hide the scrollbar but keep scrolling enabled.

📐

Syntax

There are different CSS properties to hide scrollbars depending on the browser:

overflow: hidden; hides both scrollbar and disables scrolling.
scrollbar-width: none; hides scrollbar in Firefox but keeps scrolling.
::-webkit-scrollbar { display: none; } hides scrollbar in Chrome, Safari, and Edge but keeps scrolling.

css

/* Hide scrollbar and disable scrolling */
div {
  overflow: hidden;
}

/* Hide scrollbar but keep scrolling in Firefox */
div {
  scrollbar-width: none;
  overflow: auto;
}

/* Hide scrollbar but keep scrolling in WebKit browsers */
div::-webkit-scrollbar {
  display: none;
}

💻

Example

This example shows a scrollable box with hidden scrollbars on all modern browsers while still allowing scrolling.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hide Scrollbar Example</title>
<style>
  .scroll-box {
    width: 300px;
    height: 150px;
    overflow: auto;
    scrollbar-width: none; /* Firefox */
  }
  .scroll-box::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }
  .content {
    height: 400px;
    background: linear-gradient(to bottom, #a0c4ff, #bdb2ff);
  }
</style>
</head>
<body>
  <div class="scroll-box" tabindex="0" aria-label="Scrollable content with hidden scrollbar">
    <div class="content">Scroll me vertically without visible scrollbar.</div>
  </div>
</body>
</html>

Output

A 300x150 pixel box with vertical scroll enabled but no visible scrollbar, showing a vertical gradient background inside that can be scrolled by mouse or keyboard.

⚠️

Common Pitfalls

Common mistakes when hiding scrollbars include:

Using overflow: hidden; when you want to keep scrolling, which disables scrolling entirely.
Not adding vendor-specific rules, so scrollbars remain visible in some browsers.
Forgetting accessibility: hidden scrollbars can confuse keyboard users if focus styles or labels are missing.

css

/* Wrong: disables scrolling completely */
div {
  overflow: hidden;
}

/* Right: hides scrollbar but allows scrolling */
div {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
}
div::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

📊

Quick Reference

Summary tips for hiding scrollbars:

Use scrollbar-width: none; for Firefox.
Use ::-webkit-scrollbar { display: none; } for Chrome, Safari, and Edge.
Keep overflow: auto; or scroll to allow scrolling.
Use overflow: hidden; only if you want to disable scrolling.
Always test on multiple browsers and consider keyboard accessibility.

✅

Key Takeaways

Use vendor-specific CSS to hide scrollbars while keeping scrolling enabled.

Avoid overflow: hidden; if you want users to scroll content.

Test scrollbar hiding on Firefox and WebKit browsers separately.

Add accessibility labels and keyboard focus to hidden-scroll areas.

Hiding scrollbars improves UI cleanliness but should not reduce usability.