Hide Scrollbars Using CSS: Quick Examples and Best Practices

Scrollbars are essential for navigating overflow content, but sometimes you might want to hide them for aesthetic or UX purposes. This guide covers straightforward ways to hide scrollbars using CSS, with clear explanations, practical examples, and considerations to ensure your design remains user-friendly and accessible.

Basic method: completely hide scrollbar

If your goal is to fully hide scrollbars across browsers, here’s the simplest and most reliable method:

CSS Snippet

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

/* Hide scrollbar for IE, Edge, Firefox */
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

Apply the .no-scrollbar class to your scrollable element:

<div class="no-scrollbar">
  <!-- Content here -->
</div>

Browser compatibility:

• Chrome, Safari, Opera
• Firefox, Edge, IE

Considerations:

• Fully hiding scrollbars might confuse users unaware that content can scroll.
• Ensure intuitive navigation cues are present to indicate scrollable content.

Hide scrollbar but keep scrolling

This common scenario allows users to scroll while keeping the scrollbar invisible.

CSS Snippet

.container {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
}

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

Explanation:

• overflow: auto ensures content is scrollable.
• The scrollbar is visually hidden but scroll functionality remains.

Practical Example:

Useful for designs like carousels or custom scrollable areas.

Hide vertical or horizontal scrollbars only

Sometimes, you may only need to hide the scrollbar in one direction. Here’s how:

CSS Snippet for Vertical Scrollbar Only

.vertical-scroll {
  overflow-y: scroll;
  overflow-x: hidden;
}

.vertical-scroll::-webkit-scrollbar {
  width: 0; /* Chrome, Safari, Opera */
}

CSS Snippet for Horizontal Scrollbar Only

.horizontal-scroll {
  overflow-x: scroll;
  overflow-y: hidden;
}

.horizontal-scroll::-webkit-scrollbar {
  height: 0; /* Chrome, Safari, Opera */
}

Use Cases:

• Vertical-only scrollbars for text-heavy content areas.
• Horizontal-only scrollbars for galleries or timelines.

Accessibility and usability considerations

While hiding scrollbars can enhance visual design, it can also introduce usability and accessibility issues:

• User Confusion: Users may not realize content is scrollable.
• Keyboard Navigation: Ensure that scrolling via keyboard or assistive technology remains intact.

Best Practices:

• Clearly indicate scrollable content visually or with subtle UX cues (e.g., shadows, partial item visibility).
• Regularly test your implementation across different devices and browsers to ensure usability.

Accessibility recommendations

• Ensure keyboard navigability and announce scrollable content clearly via ARIA roles.
• Provide visual cues indicating more content is available off-screen.

Common pitfalls and fixes

Scrollbars still appearing

• Issue: Scrollbars appear in specific browsers.
• Fix: Use combined browser-specific properties as shown in snippets above.

Loss of scroll functionality

• Issue: Content is no longer scrollable.
• Fix: Check that overflow: auto or overflow: scroll is set correctly, and avoid setting overflow to hidden.

Unexpected scroll behavior

• Issue: Scrollbar hidden but elements overflow unpredictably.
• Fix: Set clear height or max-height properties to manage overflow consistently.

Conclusion

Hiding scrollbars with CSS can significantly enhance the visual appearance of your UI. By carefully choosing the right CSS method and considering accessibility, you ensure your design remains intuitive and user-friendly. Always test extensively to confirm usability across browsers and devices.

FAQs