Make your scrollbars match your UI. Do it with only two CSS properties.
scrollbar-color sets the colors.
First value is the thumb. Second is the track.
Example: scrollbar-color: hashtag#8aaa8a hashtag#294b29;
scrollbar-width controls size.
Use auto, thin, or none to hide it.
Example: scrollbar-width: thin;
Apply these on any scrollable container. Or put them on `:root to style the page scrollbars.
It respects user settings like overlay scrollbars. So on macOS they appear when scrolling and keep your colors.
Accessibility tip. Pick a thumb color with strong contrast against the track.
For the browser support, it’s not great for now.
~73% for the scrollbar-color property.
~83% for the scrollbar-width property.
But they graciously fallback to default style if not supported.
If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.
Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!