Customizing Scrollbars with CSS

Customizing scrollbars is a great way to enhance the user experience of your website or web application. While it’s been possible to customize scrollbars in WebKit-based browsers like Chrome and Safari for some time, Firefox has also introduced support for scrollbar customization in recent versions. In this tutorial, we’ll explore how to customize scrollbars using CSS.

Introduction to Scrollbar Customization

Scrollbar customization allows you to change the appearance of scrollbars on your website or web application. This can include changing the color, width, and style of the scrollbar. While it’s not possible to completely replace the native scrollbar with a custom one, you can use CSS to customize its appearance.

Customizing Scrollbars in Firefox

Firefox 64 introduced support for the CSS Scrollbars Module Level 1, which allows you to customize scrollbars using two new properties: scrollbar-width and scrollbar-color. The scrollbar-width property allows you to set the width of the scrollbar, while the scrollbar-color property allows you to set the color of the scrollbar thumb and track.

Here’s an example of how to use these properties:

.scroll {
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #0A4C95 #C2D2E4;
}

In this example, we’re setting the scrollbar-width property to thin, which will make the scrollbar thinner. We’re also setting the scrollbar-color property to #0A4C95 for the thumb and #C2D2E4 for the track.

Customizing Scrollbars in Chrome

Chrome uses a different set of properties to customize scrollbars, prefixed with -webkit-. Here’s an example of how to customize scrollbars in Chrome:

.scroller::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}

.scroller::-webkit-scrollbar-track-piece {
  background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb:vertical {
  height: 30px;
  background-color: #0A4C95;
}

In this example, we’re setting the width and height of the scrollbar, as well as the background color of the track and thumb.

Combining Firefox and Chrome Styles

To customize scrollbars in both Firefox and Chrome, you can use a combination of the two sets of properties. Here’s an example:

.scroller {
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #0A4C95 #C2D2E4;
}

.scroller::-webkit-scrollbar {
  width: 15px;
  height: 15px;
}

.scroller::-webkit-scrollbar-track-piece {
  background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb:vertical {
  height: 30px;
  background-color: #0A4C95;
}

In this example, we’re setting the scrollbar-width and scrollbar-color properties for Firefox, as well as the -webkit- prefixed properties for Chrome.

Conclusion

Customizing scrollbars is a great way to enhance the user experience of your website or web application. By using the CSS Scrollbars Module Level 1 properties in Firefox and the -webkit- prefixed properties in Chrome, you can customize the appearance of scrollbars on your website. Remember to test your styles in both browsers to ensure that they look as intended.