How to Hide Scrollbars in CSS (With and Without Keeping Scroll Functionality)

Scrollbars are a helpful feature in any interface, but sometimes you may want to hide them for cleaner designs.

Hiding the scrollbar in CSS is easy.

In this post, you’ll learn how to hide scrollbars in CSS while keeping the scroll functionality intact (or completely disabling it).

---

1. Hiding Scrollbars and Disabling Scrolling

If you want to completely hide scrollbars and disable scrolling, you can set overflow to hidden:

Example:

.container {
	overflow: hidden;
}

With this approach, the content inside .container will not be scrollable.

2. Hiding Scrollbars but Keeping Scroll Functionality

If you want the content to still be scrollable, you can hide the scrollbar using the following CSS:

Example (for modern browsers):

.container {
	overflow: auto; /* Enables scrolling */
	scrollbar-width: none; /* For Firefox */
	-ms-overflow-style: none; /* For Internet Explorer and Edge */
}

.container::-webkit-scrollbar {
	display: none; /* For Chrome, Safari, and other WebKit browsers */
}

• overflow: auto: Ensures the content remains scrollable.
• scrollbar-width: none: Hides the scrollbar in Firefox.
• -ms-overflow-style: none: Hides the scrollbar in Internet Explorer.
• ::-webkit-scrollbar { display: none; }: Hides the scrollbar in WebKit-based browsers like Chrome and Safari.

---

Be careful

• Test across browsers: Some older browsers may not fully support the scrollbar-hiding properties.
• Accessibility matters: Hidden scrollbars can sometimes confuse users. Consider adding visual cues, like arrows or drag instructions, to indicate that the content is scrollable.

---

For more CSS tips and tricks, check out the CSS Pro Visual Editor, where you can tweak styles visually and see instant results. 🚀