Frontend Tips (2) : Stylish Scrollbars with scrollbar-color

🌟 Custom Scrollbars Made Easy with scrollbar-color in CSS! 🚀

Styling scrollbars used to be a hassle, requiring vendor-specific properties like ::-webkit-scrollbar. But now, modern CSS offers a simpler and more elegant solution: the scrollbar-color property! 🎨

This property is a cross-browser alternative to ::-webkit-scrollbar, allowing you to style the scrollbar thumb (the draggable part) and track (the background) without relying on browser-specific syntax.

---

🎯 Example:

Here’s how you can customize your scrollbar:

html {
  scrollbar-color: #4caf50 #f0f0f0; /* thumb color | track color */
  scrollbar-width: thin; /* Optional: thin, auto, none */
}

Explanation:

• #4caf50: This is the thumb color (the draggable part).

• #f0f0f0: This is the track color (the background).

• scrollbar-width: thin: Reduces the width of the scrollbar for a sleek appearance.

---

🔍 Browser Support:

---

🚀 Tip for Wider Support:

Combine scrollbar-color for Firefox users and ::-webkit-scrollbar for WebKit-based browsers to ensure consistent styling across all platforms. For example:

html {
  scrollbar-color: #4caf50 #f0f0f0;
  scrollbar-width: thin;
}

/* WebKit browsers (Chrome, Safari, Edge) */
html::-webkit-scrollbar {
  width: 8px;
}
html::-webkit-scrollbar-thumb {
  background-color: #4caf50;
  border-radius: 10px;
}
html::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

---

👨‍💻 Read More

https://www.w3schools.com/cssref/tryit.php?filename=trycss_scrollbar-color
https://css-tricks.com/almanac/properties/s/scrollbar-color/
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color