How to Hide Scrollbar but Keep Scrolling in CSS

To hide the scrollbar but keep scrolling in CSS, use overflow: auto; or overflow: scroll; on the container and add scrollbar-width: none; for Firefox and ::-webkit-scrollbar { display: none; } for WebKit browsers. This hides the scrollbar visually but allows users to scroll the content normally.

Syntax

Use the following CSS properties to hide scrollbars while keeping scrolling enabled:

• overflow: auto; or overflow: scroll; enables scrolling.
• scrollbar-width: none; hides scrollbar in Firefox.
• ::-webkit-scrollbar { display: none; } hides scrollbar in Chrome, Safari, and Edge.

css

selector {
  overflow: auto; /* or scroll */
  scrollbar-width: none; /* Firefox */
}

selector::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

Example

This example shows a scrollable box with hidden scrollbars. You can scroll the content by dragging or using the mouse wheel, but the scrollbar is invisible.

css

html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}

.scroll-container {
  width: 300px;
  height: 150px;
  border: 2px solid #333;
  overflow: auto;
  scrollbar-width: none; /* Firefox */
}

.scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

.content {
  height: 400px;
  background: linear-gradient(180deg, #a0c4ff, #bdb2ff);
  padding: 10px;
  color: #222;
}

Output

<div style="width:300px; height:150px; border:2px solid #333; overflow:auto; scrollbar-width:none;">
  <div style="height:400px; background:linear-gradient(180deg, #a0c4ff, #bdb2ff); padding:10px; color:#222;">
    Scroll this content vertically. The scrollbar is hidden but you can still scroll.
  </div>
</div>

Common Pitfalls

Common mistakes when hiding scrollbars but keeping scrolling:

• Setting overflow: hidden; which disables scrolling entirely.
• Not including vendor-specific rules, so scrollbars remain visible in some browsers.
• Using display: none; on the container, which hides content instead of scrollbar.

css

/* Wrong: disables scrolling */
.container {
  overflow: hidden;
}

/* Right: hides scrollbar but allows scrolling */
.container {
  overflow: auto;
  scrollbar-width: none;
}
.container::-webkit-scrollbar {
  display: none;
}

Quick Reference

Summary tips for hiding scrollbars but keeping scrolling:

• Use overflow: auto; or overflow: scroll; to enable scrolling.
• Use scrollbar-width: none; for Firefox.
• Use ::-webkit-scrollbar { display: none; } for Chrome, Safari, and Edge.
• Test on multiple browsers to ensure consistent behavior.

Key Takeaways

Use overflow: auto or scroll to keep scrolling enabled.

Hide scrollbars with scrollbar-width: none for Firefox.

Hide scrollbars with ::-webkit-scrollbar { display: none; } for WebKit browsers.

Avoid overflow: hidden as it disables scrolling.

Test across browsers for consistent scrollbar hiding.