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!