Styling scrollbars with just two lines of CSS
Modern web browsers support a plethora of features that can be used to enhance the user experience. The one feature that’s just got more wider support is the ability to style the scrollbars using standard properties in CSS.
Essentially, you can style the scrollbars of an element using the scrollbar-width and scrollbar-color properties.
As the names suggest, scrollbar-width is used to set the width of the scrollbar and scrollbar-color is used to set the color of the scrollbar.
The scrollbar-width property
The scrollbar-width property is used to set the width of the scrollbar. It can have one of the three values:
auto: This is the default value. It allows the browser to set the width of the scrollbar.thin: It sets the width of the scrollbar to a thin variant compared to the default width.none: It hides the scrollbar.
See the Pen scrollbar-width demo by Amit Merchant (@amit_merchant) on CodePen.
Like this article? Consider leaving a
Tip
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
