Hide scroll bar, but while still being able to scroll

Learn hide scroll bar, but while still being able to scroll with practical examples, diagrams, and best practices. Covers html, css, google-chrome development techniques with visual explanations.

Invisible Scrollbars: How to Hide Them While Retaining Scroll Functionality

Hero image for Hide scroll bar, but while still being able to scroll

Learn various CSS techniques to hide scrollbars across different browsers (Chrome, Firefox, IE) while ensuring users can still scroll through content seamlessly.

Web design often calls for a clean, minimalist aesthetic, and visible scrollbars can sometimes detract from that. While completely removing scrolling functionality is rarely the goal, hiding the scrollbar itself while maintaining the ability to scroll is a common requirement. This article explores several CSS methods to achieve this across different browsers, ensuring a consistent user experience without sacrificing accessibility.

Understanding the Challenge

The primary challenge lies in the browser-specific implementations of scrollbar styling. There isn't a single, universal CSS property that works identically across all major browsers to hide scrollbars. Each browser engine (WebKit for Chrome/Safari, Gecko for Firefox, Trident/EdgeHTML for Internet Explorer/Edge Legacy) has its own proprietary way of handling scrollbar customization. Modern Edge (Chromium-based) largely follows WebKit's approach.

flowchart TD
    A[User Wants Hidden Scrollbar] --> B{Browser Compatibility?}
    B -->|WebKit (Chrome, Safari, new Edge)| C[Use ::-webkit-scrollbar]
    B -->|Firefox| D[Use scrollbar-width]
    B -->|IE/Edge Legacy| E[Use -ms-overflow-style]
    C --> F[Set width/height to 0, background to transparent]
    D --> G[Set scrollbar-width to none]
    E --> H[Set -ms-overflow-style to none]
    F & G & H --> I[Content Still Scrolls]
    I --> J[Achieved Hidden Scrollbar]

Decision flow for hiding scrollbars based on browser compatibility.

Browser-Specific Solutions

To effectively hide scrollbars while preserving scrolling, we need to apply different CSS rules for different browser engines. Below are the common approaches for WebKit-based browsers, Firefox, and Internet Explorer/Edge Legacy.

WebKit (Chrome, Safari, New Edge)

WebKit-based browsers (Chrome, Safari, and the new Chromium-based Microsoft Edge) use pseudo-elements to style scrollbars. To hide them, you can target ::-webkit-scrollbar and set its display to none or its width/height to 0.

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

/* Alternatively, for a more subtle approach or if display: none causes issues */
.container::-webkit-scrollbar {
  width: 0; /* Remove scrollbar space */
  background: transparent; /* Optional: make scrollbar track transparent */
}

This method effectively removes the visual scrollbar while the content remains scrollable.

Firefox

Firefox introduced the scrollbar-width and scrollbar-color properties as part of the CSS Scrollbars Module Level 1. To hide the scrollbar in Firefox, you can set scrollbar-width to none.

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

This property is specifically designed for this purpose and is the most straightforward solution for Firefox.

Internet Explorer / Edge Legacy

For older versions of Internet Explorer and the legacy (EdgeHTML-based) Microsoft Edge, the -ms-overflow-style property is used. Setting it to none will hide the scrollbar.

.container {
  -ms-overflow-style: none; /* For Internet Explorer and Edge Legacy */
}

This property controls the appearance of scrollbars for elements with overflow content.

Combining Solutions for Cross-Browser Compatibility

To ensure your hidden scrollbars work across the widest range of browsers, you'll need to combine these browser-specific rules. It's best to apply them to the element that contains the scrollable content.

.scrollable-content {
  overflow: auto; /* Ensures content is scrollable */
  
  /* Hide scrollbar for IE, Edge Legacy */
  -ms-overflow-style: none;
  
  /* Hide scrollbar for Firefox */
  scrollbar-width: none;
  
  /* Hide scrollbar for Chrome, Safari, and new Edge (WebKit) */
  &::-webkit-scrollbar {
    display: none; /* Or width: 0; background: transparent; */
  }
}

Comprehensive CSS for cross-browser hidden scrollbars.

Accessibility Considerations

Hiding scrollbars can sometimes impact accessibility, especially for users who rely on visual cues to understand content overflow or who use mouse wheels/trackpads less frequently. Ensure that there are alternative ways for users to understand that content is scrollable, such as subtle visual indicators (e.g., a fading gradient at the bottom of a scrollable area) or clear instructions if the content is critical.

Hero image for Hide scroll bar, but while still being able to scroll

Using a subtle gradient to indicate scrollable content without a visible scrollbar.