Master CSS Scrollbar Styling: The Ultimate Guide for 2024

Want to give your website a unique touch? Learn how to customize scrollbars with CSS! This guide provides simple, actionable steps to style scrollbars across different browsers, enhancing user experience and visual appeal.

Why Customize Scrollbars with CSS?

Customizing scrollbars can significantly improve your website's aesthetics. A well-styled scrollbar can:

• Enhance Branding: Align scrollbars with your brand's color scheme and design.
• Improve UX: Make your site more visually appealing and user-friendly.
• Show Attention to Detail: Demonstrate your commitment to a polished user experience.

Browser Support for CSS Scrollbar Styling

As of 2020, about 96% of internet users have browsers with support for CSS scrollbar styling. To support the major browsers, you'll need to use the older WebKit specification and the newer CSS Scrollbars specification.

Styling Scrollbars in Chrome, Edge, and Safari

For Chrome, Edge, and Safari, the -webkit-scrollbar pseudo-element is your go-to for styling. This method gives you control over various parts of the scrollbar:

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 CSS code will produce scrollbars with a blue "thumb" on an orange "track".

Key -webkit-scrollbar Pseudo-elements:

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

It's important to note that the -webkit-scrollbar specification has been formally abandoned by W3C and will likely be deprecated over time.

Styling Scrollbars in Firefox

Firefox uses the newer CSS Scrollbars specification, offering a simpler approach with scrollbar-width and scrollbar-color properties.

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

With this code, Firefox will render a scrollbar with a blue thumb and orange track. This works similarly to the -webkit-scrollbar specification for controlling scrollbar color.

Future-Proofing Your CSS Scrollbar Styles

To ensure compatibility across browsers, combine both -webkit-scrollbar and CSS Scrollbars specifications:

/* 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, ensuring a consistent look across different platforms. As Blink and WebKit browsers deprecate -webkit-scrollbar, they will gracefully fall back to the CSS Scrollbars specification.

Simulating Scrollbars: An Alternative Approach

While CSS offers native scrollbar styling, JavaScript can simulate scrollbars by hiding the default ones and detecting scroll position. However, this method has limitations, especially with inertia scrolling.

Conclusion: Elevate Your Web Design with Custom Scrollbars

Customizing scrollbars with CSS is a simple yet effective way to enhance your website’s design and user experience. By using the -webkit-scrollbar and CSS Scrollbars specifications, you can create visually appealing scrollbars that are compatible with most modern browsers.

Ready to take your website's design to the next level? Start customizing your scrollbars today!