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.
👋 Hi there! This is Amit, again. I write articles about all things web development. If you enjoy my work (the articles, the open-source projects, my general demeanour... anything really), consider leaving a tip & supporting the site. Your support is incredibly appreciated!
