Connect with us

CSS

CSS Guide: How to Hide Scrollbars Without Losing Scroll Functionality

Spread the love

Scrollbars are useful, but sometimes, especially in modern, minimal UI designs, you might want to hide the scrollbar while still allowing the user to scroll. Fortunately, CSS makes this possible with just a few lines of code.

In this article, you’ll learn:

  • โœ… When and why you might want to hide scrollbars
  • ๐Ÿงฐ Cross-browser methods for hiding scrollbars using CSS
  • ๐Ÿงช Code examples that maintain scroll functionality
  • ๐Ÿ’ก Best practices and considerations

โœ… Why Hide Scrollbars?

Here are a few use cases where hiding scrollbars is desirable:

  • When using custom scroll behavior or animations
  • To achieve a clean, distraction-free layout
  • In touch devices where scrollbars aren’t always needed
  • For horizontally scrolling sections or sliders

๐Ÿงฐ CSS Techniques to Hide Scrollbars

๐Ÿ”น Method 1: Hide Scrollbar (Maintain Scroll) โ€” WebKit Browsers

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

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

โœ… HTML Example

<div class="hide-scrollbar" style="height: 200px;">
  <p>This container can scroll, but the scrollbar is hidden.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  <p>More content...</p>
</div>
  • This keeps the scrolling enabled, but hides the scrollbar.
  • Works across modern browsers, including Chrome, Firefox, Safari, and Edge.

๐Ÿ”น Method 2: Hide Only Horizontal or Vertical Scrollbars

Hide Horizontal Scrollbar:

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

Hide Vertical Scrollbar:

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

๐Ÿงช Full Working Example

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

  .scroll-box::-webkit-scrollbar {
    display: none;  /* Chrome/Safari */
  }

  .content {
    height: 500px;
    background: linear-gradient(#f8f8f8, #ccc);
    padding: 10px;
  }
</style>

<div class="scroll-box">
  <div class="content">
    This scrollable content has its scrollbar hidden.
  </div>
</div>

๐Ÿ’ก Things to Keep in Mind

ConsiderationTip
AccessibilityMake sure users know the content is scrollable
PerformanceDon’t hide scrollbars on large containers unnecessarily
Touch DevicesScrollbars are usually hidden by default on mobile
Keyboard NavigationEnsure tab, arrow, and focus navigation still work

โœ… Conclusion

Hiding scrollbars in CSS is straightforward and useful for improving visual design. With just a few lines of code, you can remove scrollbars while still allowing users to scroll using a mouse, keyboard, or touch gesture.

โœจ Quick Snippet to Remember:

overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
::-webkit-scrollbar {
  display: none;
}

Spread the love
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *