How to Hide Scrollbar with CSS – A Clean UI Trick

Scrollbars are useful — but sometimes, you might want to hide them to create a cleaner or more minimal design. Whether you’re building a slider, a modal, or a full-screen section, CSS gives you control over how and when scrollbars appear.

In this post, you’ll learn how to hide scrollbars using simple and effective CSS techniques — while still keeping the scrolling functionality if needed.

Table of Contents

✅ When Should You Hide a Scrollbar?

You want a custom scrollbar or smooth scroll experience.
You’re building a carousel or slider where the scrollbar is distracting.
You need to preserve layout space on mobile devices.
You want to hide overflow for a modal or sidebar.

🛠️ Method 1: Hide Scrollbar But Keep Scrolling (Cross-Browser)

This is the most common use case: scrolling still works, but the scrollbar is hidden.

✅ For WebKit Browsers (Chrome, Safari, Edge)

.hide-scrollbar {
  overflow: auto;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;             /* Chrome, Safari */
}

HTML Example:

<div class="hide-scrollbar">
  <!-- Your scrollable content here -->
</div>

✅ Works in: Chrome, Edge, Safari, Firefox

🛠️ Method 2: Completely Disable Scrollbar and Scrolling

This disables both the scrollbar and scrolling:

.no-scroll {
  overflow: hidden;
}

Example:

<body class="no-scroll">
  <!-- Page content -->
</body>

📌 Useful for modal popups, full-screen menus, or background lock when a popup is open.

🛠️ Method 3: Horizontal or Vertical Only

🔒 Hide Horizontal Scrollbar:

.no-x-scroll {
  overflow-x: hidden;
}

🔒 Hide Vertical Scrollbar:

.no-y-scroll {
  overflow-y: hidden;
}

🧪 Live Example

<style>
  .scroll-box {
    width: 300px;
    height: 150px;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scroll-box::-webkit-scrollbar {
    display: none;
  }

  .content {
    height: 400px;
    background: linear-gradient(to bottom, #f0f0f0, #ccc);
  }
</style>

<div class="scroll-box">
  <div class="content"></div>
</div>

🎯 Try it: You’ll be able to scroll using the mouse or touchpad — but no scrollbar will appear!

⚠️ Accessibility Tip

Hiding scrollbars may confuse users who rely on them to know content is scrollable. To maintain usability:

Consider adding visual cues (like shadows, arrows, or drag handles).
Ensure keyboard navigation is supported (like Tab, PageDown).

🔚 Conclusion

Hiding scrollbars with CSS is easy, but you should use it wisely. With just a few lines of CSS, you can enhance your design without sacrificing usability — as long as you ensure that users can still interact with your content.

📌 Quick Reference

Goal	CSS Code Snippet
Hide scrollbar, keep scrolling	`overflow: auto; scrollbar-width: none;`
Hide both scroll & scrollbar	`overflow: hidden;`
Hide only horizontal scrollbar	`overflow-x: hidden;`
Hide only vertical scrollbar	`overflow-y: hidden;`