Stop Settling for Default Scrollbars: A CSS Styling Guide

Want to add a personal touch to your website? Customizing scrollbars with CSS is easier than you think! This guide provides simple, effective code snippets to style your scrollbars across different browsers.

Why Customize Scrollbars with CSS?

• Enhance your brand: Match scrollbars to your website's color scheme.
• Improve user experience: Make scrollbars more visible or subtle.
• Add a unique touch: Stand out from the crowd with custom designs.

Browser Compatibility: What You Need to Know

While CSS scrollbar styling enjoys broad support (about 96% of users), different browsers require different approaches. This guide covers both, so you're covered!

Prerequisites: Before You Start

Understanding vendor prefixes, pseudo-elements, and graceful degradation will help you get the most out of this guide. Don't worry if you're not an expert; we'll walk you through it.

Styling Scrollbars in Chrome, Edge, and Safari

These browsers rely on the -webkit-scrollbar pseudo-element for styling. It gives you fine-grained control over different parts of the scrollbar.

The Code

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 */
}

What This Code Does

• ::-webkit-scrollbar: Styles the entire scrollbar.
• ::-webkit-scrollbar-track: Styles the background of the scrollbar.
• ::-webkit-scrollbar-thumb: Styles the draggable part of the scrollbar.

Important Note

The -webkit-scrollbar specification has been abandoned by W3C and might be deprecated in the future. Ensure you implement future-proof styles!

Styling Scrollbars in Firefox

Firefox uses the newer CSS Scrollbars specification, which is simpler but less customizable. Let's take a look.

The Code

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

What This Code Does

• scrollbar-width: Sets the width of the scrollbar.
• scrollbar-color: Sets the color of the scroll thumb and track.

Limitations

Firefox's approach doesn't allow for rounded corners or padding around the scroll thumb.

Future-Proofing Your Scrollbar Styles

To ensure your scrollbar styles work across browsers and remain functional in the future, use both -webkit-scrollbar and the standard CSS Scrollbars properties.

The Code

/* 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;
}

How This Works

Browsers will ignore the rules they don't recognize and apply the ones they do. When -webkit-scrollbar is eventually deprecated, browsers will gracefully fall back to the standard CSS Scrollbars properties.

Beyond Basic Styling: Considerations

While CSS provides basic scrollbar customization, JavaScript can offer more advanced control.

Simulating Scrollbars with JavaScript

You can hide the default scrollbar and use JavaScript to create a custom one, but this approach has limitations, especially with "inertia" scrolling.

Conclusion: Take Control of Your Scrollbars

With the CSS scrollbar styling techniques discussed, you can now customize scrollbars to match your website's design and improve user experience. Ensure that you test across different browsers to guarantee the best possible result!