CSS scrollbar-color Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 16 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The scrollbar-color property in CSS is a convenient way to customize the color of a scrollbar in a web page.

This property allows you to specify the color of the scrollbar's thumb and track, enhancing the overall design and user experience of your website. Custom scrollbars can make your site more visually appealing and consistent with your branding.

💡 Syntax

The syntax for the scrollbar-color property is simple. You can specify two colors: one for the scrollbar thumb and one for the scrollbar track.

Syntax

Copied

element {
  scrollbar-color: thumb-color track-color;
}

thumb-color: The color of the scrollbar thumb.
track-color: The color of the scrollbar track.

🎛️ Default Value

The default value of the scrollbar-color property is auto, which means the colors are determined by the user agent (browser) and the operating system.

🏠 Property Values

Value	Description
auto	Default value, uses the user agent's default colors for the scrollbar.
thumb-color track-color	Two color values representing the thumb and track colors, respectively. These can be named colors, hexadecimal values, RGB values, HSL values, etc.

📄 Example

In this example, we'll change the scrollbar colors of a div element to have a blue thumb and a light gray track.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS scrollbar-color Example</title>
  <style>
    div {
      width: 300px;
      height: 150px;
      overflow: auto;
      scrollbar-color: blue lightgray;
    }
  </style>
</head>
<body>
  <h1>Custom Scrollbar Colors</h1>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet est et risus convallis, ut accumsan magna tincidunt. Integer pulvinar dui non nisi elementum, a scelerisque nisl fermentum. Nulla facilisi. Cras venenatis sem at velit auctor, nec lacinia lectus sodales. Duis convallis mi eu facilisis tristique. Suspendisse potenti. Donec scelerisque, nunc in vehicula facilisis, justo ante malesuada urna, vel vulputate nisi justo sed lorem. Quisque id magna quam.</p>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The scrollbar-color property is supported in most modern browsers, including Firefox and Edge. However, it's important to note that as of now, this property is not supported in Chrome, Safari, and Opera. Therefore, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The scrollbar-color property provides a simple way to customize the appearance of scrollbars, allowing you to create a more cohesive and visually appealing design.

By experimenting with different colors, you can ensure that every aspect of your website matches your design vision. Keep in mind the browser compatibility to make sure your custom scrollbars are effective across various platforms.