Creating Custom Scrollbars with CSS: A Short Guide

Modern web browsers allow developers to customize the appearance of scrollbars using CSS, enhancing the visual appeal of web applications while maintaining functionality. This guide explores how to implement custom scrollbars with cross-browser compatibility.

Basic Setup

First, let's establish the container that will feature our custom scrollbar:

<div class="scrollbar-container">
  <h3>Visible custom scrollbar</h3>
  <p>
    <!-- Content that creates scrollable overflow -->
  </p>
</div>

Container Styling

The scrollable container needs specific dimensions and overflow properties:

.scrollbar-container {
  height: 50%;           /* Fixed height to enable scrolling */
  width: 50%;           /* Container width */
  margin: 0 auto;       /* Center the container */
  overflow: auto;       /* Enable scrolling */
  padding: 1rem;        /* Internal spacing */
}

Cross-Browser Implementation

WebKit Browsers (Chrome, Safari, Edge)

For WebKit-based browsers, we use the ::-webkit-scrollbar pseudo-elements:

.scrollbar-container::-webkit-scrollbar {
  width: 4px;                    /* Width of the scrollbar */
  background-color: white;       /* Background color */
  border-radius: 100vw;         /* Rounded corners */
}

.scrollbar-container::-webkit-scrollbar-track {
  background: white;            /* Track color */
  border-radius: 100vw;        /* Rounded corners for track */
}

.scrollbar-container::-webkit-scrollbar-thumb {
  background: plum;            /* Scrollbar thumb color */
  border-radius: 100vw;       /* Rounded corners for thumb */
}

Firefox

Firefox requires a different approach using the scrollbar-width and scrollbar-color properties:

@-moz-document url-prefix() {
  .scrollbar-container {
    scrollbar-width: thin;           /* Width of the scrollbar */
    scrollbar-color: fuchsia white;  /* thumb and track colors */
  }  
}

Design Considerations

The implementation includes several thoughtful design choices:

1. Border Radius: The 100vw value creates perfectly rounded corners for both the track and thumb.
2. Minimal Width: A 4px width keeps the scrollbar visible but unobtrusive.
3. Color Scheme: The white track with plum/fuchsia thumb provides good contrast while maintaining visual appeal.
4. Consistent Typography: The design uses the Rubik font family for better readability:

@import url(https://fonts.googleapis.com/css2?family=Rubik);

CSS Variables

The example uses CSS variables for consistent theming:

:root {
  --primary-text-color: #222;
  --secondary-text-color: #fff;
  --primary-bg-color: #222;
  --secondary-bg-color: #fff;
  --tertiary-bg-color: #ddd;
}

Browser Compatibility

• WebKit browsers (Chrome, Safari, Edge): Full support for detailed customization
• Firefox: Simplified customization with scrollbar-width and scrollbar-color
• Internet Explorer: No support for custom scrollbars
• Legacy Edge: Limited support

Best Practices

1. Maintain Usability: Keep the scrollbar visible and functional
2. Consistent Styling: Match scrollbar colors with your site's theme
3. Testing: Verify appearance across different browsers
4. Responsive Design: Consider how the scrollbar appears at different viewport sizes

Final result

Conclusion

Custom scrollbars can enhance the visual appeal of your web application while maintaining functionality. By following these patterns and considering cross-browser compatibility, you can create a consistent and attractive scrolling experience for your users.