Stop the Default: How to Customize Scrollbars with CSS for Modern Browsers

Want to give your website a unique and polished look? Learn how to style scrollbars with CSS using this detailed guide. We'll cover everything from vendor prefixes to future-proof techniques for Chrome, Safari, and Firefox. Make your site stand out.

Why Customize Scrollbars? Elevate Your User Experience

Customizing scrollbars can dramatically improve the user experience on your website. Instead of relying on the default, often clunky, browser scrollbars, you can create a seamless and visually appealing design that matches your brand. A well-designed scrollbar contributes to a more professional and engaging website.

Browser Support: Are Custom Scrollbars Ready?

As of 2020, approximately 96% of internet users are on browsers that support CSS scrollbar styling. However, different browsers require different approaches. This guide will help you navigate the nuances of styling scrollbars for Blink, WebKit (Chrome, Edge, Safari), and Firefox.

What You'll Need to Follow Along & Style Scrollbars

Before diving in, make sure you're familiar with:

• Vendor Prefixes: Browser-specific prefixes (like -webkit-) that ensure compatibility while new CSS features are standardized.
• Pseudo-elements: Keywords that let you style specific parts of an element (e.g., ::-webkit-scrollbar).
• Graceful Degradation: Designing your site so it remains functional even if certain CSS features aren't supported by the user's browser.

Chrome, Edge, and Safari: Customizing with -webkit-scrollbar

For Chrome, Edge, and Safari, the -webkit-scrollbar pseudo-element is your primary tool. Here's how you can use it:

body::-webkit-scrollbar {
  width: 12px; /* Width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: orange; /* Color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: blue; /* Color of the scroll thumb */
  border-radius: 20px; /* Roundness of the scroll thumb */
  border: 3px solid orange; /* Creates padding around scroll thumb */
}

This code snippet allows you to control the width, track color, thumb color, roundness, and border of the scrollbar. The ::-webkit-scrollbar-track styles the area behind the scrollable element and the ::-webkit-scrollbar-thumb is the moving part (thumb) of the scrollbar.

• Customize the Width: Adjust the width property to make the scrollbar thicker or thinner.
• Match Your Theme: Use background and background-color to align the scrollbar with your site's color scheme.
• Add Visual Flair: Experiment with border-radius for rounded scrollbar thumbs.

Important Note: While widely supported, the -webkit-scrollbar specification has been abandoned by the W3C and may be deprecated in the future.

Firefox: Styling Simply with CSS Scrollbars Properties

Firefox provides a simpler approach with the scrollbar-width and scrollbar-color properties:

body {
  scrollbar-width: thin; /* "auto" or "thin" */
  scrollbar-color: blue orange; /* scroll thumb and track */
}

• scrollbar-width: Set to thin for a slim scrollbar or auto for the default width.
• scrollbar-color: The first color value applies to the scroll thumb, and the second to the track.

Keep in mind that Firefox's scrollbar customization is less extensive. It lacks options for padding and thumb roundness.

Future-Proofing: Cross-Browser Scrollbar Styling with CSS

Want to ensure your scrollbar styles work across browsers, now and in the future? Use a combination of both -webkit-scrollbar and the standard CSS Scrollbars properties:

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: orange;
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

Browsers will apply the rules they recognize and ignore the rest. As Blink and WebKit browsers eventually deprecate -webkit-scrollbar, they'll naturally fall back to the standard CSS Scrollbars properties.

Beyond Basic Styling: Considerations for Accessibility and User Experience

While styling scrollbars is fun, consider these points for a better user experience:

• Contrast: Ensure sufficient contrast between the scroll thumb and track for accessibility.
• Thumb Size: Make the scroll thumb large enough for easy clicking and dragging, especially on touch devices.
• Subtlety: Avoid overly flashy scrollbar designs that distract from your content.

Conclusion: Elevate Your Website with Custom CSS Scrollbars

With CSS scrollbar customization, you can create a visually consistent and engaging experience for your website visitors. By combining browser-specific techniques with future-proof strategies, you can ensure your scrollbars look great on nearly every modern browser.

While JavaScript-based scrollbar simulations exist, they often lack the smooth scrolling behavior of native scrollbars. Using CSS scrollbar properties is the most efficient and user-friendly approach.