Master CSS Scrollbar Styling: A Cross-Browser Guide with Examples

Tired of those default, boring scrollbars? Learn how to style scrollbars with CSS! This guide provides a detailed, cross-browser approach to customizing your scrollbars, making your website more visually appealing and on-brand. We'll cover everything from basic color changes to advanced customization techniques.

Why Customize Your Scrollbars with CSS?

• Enhance User Experience: A well-styled scrollbar can provide visual cues and improve navigation.
• Reinforce Branding: Customize scrollbars to match your website's color scheme and overall design.
• Add Visual Appeal: Stand out from the crowd with unique and eye-catching scrollbars.

Browser Compatibility: What You Need to Know

While CSS scrollbar styling has broad support, with 96% of internet users using compatible browsers, the implementation differs across browsers. This guide provides code for both Blink/WebKit-based browsers (Chrome, Edge, Safari) and Firefox to ensure consistent styling for most users.

Prerequisites

Before you dive in, ensure you have a basic understanding of:

• Vendor Prefixes: These are browser-specific prefixes (like -webkit-) used for experimental or non-standard CSS properties.
• Pseudo-elements: These let you style specific parts of an element (like ::-webkit-scrollbar).
• Graceful Degradation: This design principle ensures your website remains functional even if certain CSS features aren't supported.

Styling Scrollbars in Chrome, Edge, and Safari

For Chrome, Edge, and Safari, use the -webkit-scrollbar pseudo-element to target and customize scrollbars:

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 creates a scrollbar with a blue thumb, orange track, and rounded edges.

Key Points:

• Use ::-webkit-scrollbar to target the entire scrollbar.
• Use ::-webkit-scrollbar-track to style the track (the area behind the thumb).
• Use ::-webkit-scrollbar-thumb to style the draggable thumb.
• Unfortunately, this approach is considered deprecated by the W3C. Future-proof your code using the method covered later in this tutorial.

Custom CSS Scrollbar Styling in Firefox

Firefox utilizes the newer CSS Scrollbars specification with the scrollbar-width and scrollbar-color properties. This allows for basic color customization.

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

This sets the scrollbar to a "thin" appearance with a blue thumb and an orange track.

Limitations:

• Less control over the scrollbar's appearance compared to -webkit-scrollbar.
• Limited options for styling the "track thumb," like padding or roundness.

Create Future-Proof CSS Scrollbars

To support both -webkit-scrollbar and CSS Scrollbars, combine both sets of rules in your CSS. This ensures that most modern browsers will display a styled scrollbar, and as older browsers are phased out, your styles will gracefully degrade without breaking.

/* 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 deprecate the -webkit-scrollbar specification, they will fallback to the standard CSS Scrollbars specification.

Beyond Basic CSS Scrollbar Styling: Considerations

• JavaScript Alternatives: Simulating scrollbars with JavaScript offers maximum customization, but it can be complex and may not perfectly replicate native scrolling behavior (like inertia scrolling).
• Accessibility: Ensure your custom scrollbars provide sufficient contrast and visual cues for users with disabilities.

Conclusion

Styling CSS scrollbars provide a quick and easy way to customize the look and feel of your website—use vendor prefixes while you still can. While browser compatibility requires a dual approach, the results are well worth the effort. Keep experimenting to find the perfect scrollbar style for your project!