CSS: How to Make a Scrollable div Without Scrollbars

In modern web design, scrollable content is often essential—especially for components like image galleries, chat boxes, or horizontally scrolling menus. But sometimes you want the content to scroll seamlessly without showing the scrollbars, especially for a cleaner user interface.

This tutorial will show you how to make a <div> scrollable without displaying scrollbars, while still keeping full scroll functionality.

Table of Contents

✅ Step 1: Enable Scrolling with `overflow`

To make a <div> scrollable, first apply the overflow property:

.scroll-hidden {
  width: 300px;
  height: 200px;
  overflow: auto; /* enables scrolling */
}

Now, let’s hide the scrollbars while keeping the scrolling behavior intact.

✅ Step 2: Hide Scrollbars Using Cross-Browser CSS

Different browsers require different rules to hide scrollbars:

.scroll-hidden {
  width: 300px;
  height: 200px;
  overflow: auto;
  -ms-overflow-style: none;     /* IE and Edge */
  scrollbar-width: none;        /* Firefox */
}

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

✅ This combination works in Chrome, Safari, Firefox, Edge, and other modern browsers.

✅ Example: Full HTML and CSS

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

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

  .content {
    width: 600px;
    height: 300px;
    background: linear-gradient(to right, #f06, #4a90e2);
    color: white;
    padding: 10px;
  }
</style>

<div class="scroll-hidden">
  <div class="content">
    This is a scrollable area with hidden scrollbars. Resize or scroll to explore the hidden overflow content.
  </div>
</div>

🧠 Use Cases

Smooth-scrolling image galleries
Carousel components
Chat interfaces
Code blocks or horizontally scrolling tables

⚠️ Note: Be cautious when hiding scrollbars—it may confuse users who don’t realize content is scrollable. Consider adding arrows, shadows, or scroll indicators.

🧾 Summary

Goal	CSS Rule(s)
Enable scrolling	`overflow: auto;`
Hide scrollbars in Chrome/Safari	`::-webkit-scrollbar { display: none; }`
Hide scrollbars in Firefox	`scrollbar-width: none;`
Hide scrollbars in Edge/IE	`-ms-overflow-style: none;`

🧠 Conclusion

Creating a scrollable <div> without visible scrollbars is a simple yet effective technique to achieve clean, modern UI designs. Just make sure usability doesn’t suffer — give users clear cues that they can scroll, especially on desktop.

Pro Tip: Combine with scroll-snap or animations for enhanced user experience in sliders and interactive layouts.

✅ Step 1: Enable Scrolling with overflow