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

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

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

🎯 Example:

🔍 Browser Support:

🚀 Tip for Wider Support:

👨‍💻 Read More

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