Customizing Scrollbars

by Kuligaposten 2025-02-25

Now Fully Supported in Chrome and Edge

For years, customizing scrollbars was a fragmented experience—Firefox had scrollbar-width and scrollbar-color, while WebKit browsers (Chrome, Edge, Safari) required ::-webkit-scrollbar. But now, as of Chrome 132 and Edge 132, the modern scrollbar properties are finally supported!

This means consistent, clean, and lightweight scrollbar styling across major browsers without needing extra vendor prefixes. Let's see how it works.

The CSS Snippet

*:not(html, body) {
  scrollbar-width: thin;
  scrollbar-color: var(--bs-success-text-emphasis) var(--bs-tertiary-bg);
}

html,
body {
  scrollbar-color: var(--bs-success-text-emphasis) var(--bs-tertiary-bg);
}

Breaking It Down

  1. scrollbar-width: thin;

    • Makes the scrollbar thinner for all elements except html and body.
    • Available options: auto, thin, none (hides it completely).

  2. scrollbar-color: thumb track;

    • The first color is for the scrollbar thumb (the draggable part).
    • The second color is for the scrollbar track (the background).
    • We use Bootstrap CSS variables:
      • var(--bs-success-text-emphasis): Likely a green shade for the thumb.
      • var(--bs-tertiary-bg): A soft background color for the track.

  3. Why Exclude html, body?

    • *:not(html, body) ensures the thin scrollbar applies to elements inside the page (like divs, modals, and containers), but not the main page scrolling area.
    • The scrollbar-color is still applied globally for consistency.

Adding Safari Support (Optional)

If you want this styling to work in Safari, you still need to include WebKit-specific styles:

/* WebKit (Safari) */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--bs-success-text-emphasis);
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background-color: var(--bs-tertiary-bg);
}

Why This Matters

Before this update, WebKit browsers required clunky ::-webkit-scrollbar rules, making scrollbar styling inconsistent across different browsers. Now, with Chrome 132+ and Edge 132+, developers can finally use the same modern and lightweight CSS properties everywhere except Safari.

Conclusion

Custom scrollbars can improve the visual experience of a site while staying subtle and unobtrusive. With widespread support for scrollbar-width and scrollbar-color, web developers can now enjoy a more consistent, clean, and efficient way to style scrollbars.

Try it in your projects and make your scrollbars stand out

Back to Home