Controlling Scrollbar Visibility with CSS

Scrollbars are a ubiquitous part of web page design, but sometimes you may want to remove them for aesthetic reasons while still maintaining scroll functionality. This tutorial explores various methods for controlling scrollbar visibility using CSS, ensuring a smooth user experience across different browsers.

The Challenge

The primary goal is to hide the scrollbar without disabling the ability to scroll through content that exceeds the visible area of an element. Simply using overflow: hidden will remove both the scrollbar and prevent scrolling, which is not the desired outcome.

Basic Approach: WebKit Browsers

WebKit-based browsers (Chrome, Safari, and newer versions of Edge) offer a straightforward solution:

::-webkit-scrollbar {
  display: none;
}

This CSS selector specifically targets the scrollbar element in WebKit browsers and sets its display to none, effectively hiding it. This is a quick and simple method, but it lacks cross-browser compatibility.

Expanding Compatibility: Firefox and Internet Explorer

To support Firefox and older versions of Internet Explorer, additional CSS properties are required.

Firefox:

Firefox supports hiding scrollbars using the scrollbar-width property:

scrollbar-width: none;

Internet Explorer (IE10+):

Internet Explorer offers the -ms-overflow-style property:

-ms-overflow-style: none;

Combining these properties alongside the WebKit solution provides a reasonable degree of cross-browser support:

::-webkit-scrollbar {
  display: none;
}

scrollbar-width: none; /* Firefox */
-ms-overflow-style: none;  /* Internet Explorer 10+ */

Modern Cross-Browser Solution

The scrollbar-width: none; property is now supported in modern versions of Chrome, Safari, and Firefox, offering a more standardized approach. The complete solution is:

.container {
    overflow-y: scroll; /* Enable vertical scrolling */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.container::-webkit-scrollbar {
    width: 0;
    height: 0;
}

Applying this CSS to a container element will hide the scrollbar in most modern browsers while preserving scrolling functionality.

The "Hidden Scrollbar" Technique: Padding and Margins

Another approach involves leveraging padding and margins to visually "hide" the scrollbar. This technique works by creating a parent container and a child container. The child container has the scrollbar, but its content is pushed back into view using padding, effectively concealing the scrollbar behind the parent’s border.

HTML:

<div class="parent">
  <div class="child">
    Your content goes here.
  </div>
</div>

CSS:

.parent {
  width: 400px;
  height: 200px;
  border: 1px solid #AAA;
  overflow: hidden; /* Hide the scrollbar on the parent */
}

.child {
  height: 100%;
  margin-right: -17px; /* Adjust this value based on scrollbar width */
  padding-right: 17px; /* Match the margin */
  overflow-y: scroll;
}

The parent element defines the visible area and hides any overflow.
The child element contains the scrollable content.
The negative margin-right and corresponding padding-right on the child element shift the content back into view, effectively hiding the scrollbar. The 17px value is an approximation; adjust it based on the actual scrollbar width in your browser.

Considerations and Best Practices

Accessibility: Hiding scrollbars can impact accessibility for users who rely on them to understand the content’s structure. Ensure that alternative methods of navigation and content discovery are available.
Browser Compatibility: Thoroughly test your implementation across different browsers and versions to ensure consistent behavior.
Scrollbar Width: Scrollbar width varies between operating systems and browsers. Use JavaScript (e.g., element.offsetWidth - element.clientWidth) to dynamically determine the scrollbar width and adjust the padding/margin values accordingly for a more robust solution.
User Experience: Consider whether hiding the scrollbar improves or detracts from the user experience. In some cases, a visible scrollbar can provide valuable visual cues.