The CSS Scrollbars spec allows authors to style scrollbars by specifying their colors and thickness.
The scrollbar-color property provides the capability of changing the color scheme of scrollbars so they fit better into the particular style of a web page.
The scrollbar-width property allows the use of narrower scrollbars that may be more suitable for some use cases, or even to hide the scrollbars completely without affecting scrollability.
There are three main use cases for the CSS Scrollbars spec:
- Changing the color scheme of scrollbars to fit better into the UI of a web application.
- Using a thinner scrollbar when the scrolling area is small.
- Building custom scrollbars without affecting scrollability.
For more detail, see:
Initial public proposal
Interoperability and Compatibility
Edge: No signals
Safari: No signalsWeb developers:
Positive, there is interest in better cross-platform support for styling scrollbars with CSS.
The value of scrollbar-width influences other properties such as scrollbar-gutter which take the scrollbar's thickness as reference.
There might be a complex interplay between the current theme and scrollbar-color's light and dark values (Firefox doesn't implement these).
There might be conflicts between these properties and Chromium's own ::-webkit-scrollbar pseudo-elements that serve a similar purpose.Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
That's the intention, but there might be platform-specific issues that I am not aware of at this moment.
The existing tests are not exhaustive and will be improved as part of this work.