Stop Default Scrollbars: A CSS Styling Guide for Modern Browsers
Want to give your website a unique look and feel? Learn how to customize scrollbars with CSS for Chrome, Safari, and Firefox. Plus, discover how to create future-proof scrollbar styles that work across different browsers.
Why Customize Scrollbars with CSS? Boost User Experience!
Customizing scrollbars with CSS enhances the user experience by:
- Improving aesthetics: Match your website's design.
- Providing visual cues: Make interactive elements more noticeable.
- Reinforcing branding: Ensure a cohesive and polished look.
Don't settle for default scrollbars! Stand out and leave a lasting impression!
CSS Scrollbar Styling: Browser Compatibility Check
As of 2020, approximately 96% of internet users are on browsers supporting CSS scrollbar styling! To accommodate different browsers, you'll generally need to use vendor prefixes and different sets of CSS rules for Blink/WebKit (Chrome, Edge, Safari) and Firefox.
Chrome, Edge and Safari: Using Webkit to Change Scrollbar Appearance
For Chrome, Edge, and Safari, use the -webkit-scrollbar pseudo-element, offering extensive customization options for the scrollbar's parts. Here's how to style scrollbars with WebKit:
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 */
}
Unfortunately, this spec has been formally abandoned by W3C so this may not be the best going forward.
WebKit Scrollbar Properties: A quick Look
::-webkit-scrollbar: targets the entire scrollbar. You can set properties likewidthorheight.::-webkit-scrollbar-track: styles the track (the area where the thumb moves). Common properties includebackground-colorandborder.::-webkit-scrollbar-thumb: customizes the draggable scrollbar thumb. Key properties:background-color,border-radius, andborder.
Firefox Scrollbar Styling: The Modern Approach
Firefox utilizes newer CSS Scrollbars standards, simplifying customization with scrollbar-width and scrollbar-color properties.
body {
scrollbar-width: thin; /* "auto" or "thin" */
scrollbar-color: blue orange; /* Scroll thumb and track */
}
While this method provides color control, modifying the "track thumb's" padding and roundness isn't currently supported.
Benefits of Using CSS Scrollbars in Firefox
- Simplicity: Easier syntax compared to WebKit.
- Native Look: Integrates well with the operating system’s default appearance.
Future-Proof Your Scrollbar Styles: Cross-Browser Harmony
To achieve broad compatibility, combine -webkit-scrollbar and the newer CSS Scrollbars properties. Here's a universal CSS scrollbar styling approach:
/* 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;
}
By including both sets of rules, you ensure that modern browsers render customized scrollbars while gracefully falling back as older standards are deprecated.
Vendor Prefixes and Graceful Degradation
Blink and WebKit browsers apply -webkit-scrollbar rules and ignore the others. Firefox browsers apply CSS Scrollbars rules. When Blink and WebKit browsers deprecate -webkit-scrollbar, they'll fall back to CSS Scrollbars. This is graceful degradation in action!
Ditch Ugly Defaults! Start Customizing Your Scrollbars Today
You've learned how to style scrollbars using CSS for a better user experience across modern browsers. Though Javascript solutions exist, they can have limitations. By using the methods described above, you can ensure your website looks great and feels intuitive!