Add scrollbar utility

I’d suggest adding scrollbar utilities.

Firefox supports scrollbar-color and scrollbar-width properties since v64. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

Webkit offers even more customization. https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f5f5f5;
    scroll-behavior: smooth;
}
.scrollbar-thin::-webkit-scrollbar{
    width: 6px;
    height: 6px;
    background-color: #f5f5f5;
}
.scrollbar-thin::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: #c1c1c1;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: #9d9d9d;
}

I hope this utility would make a scrollable sidebar and modal a little concise.

[ffoodd]

There’s almost no browser support in our targetted browsers in v5:

1. Firefox implements CSS WG standardized properties since 64, but we currently support above 60;
2. WebKit & Blink browsers support non-standards pesudo-elements, the spec going to properties and not pseudo-elements…
3. Edge Legacy has no support at all;
4. all those implementations are buggy: Firefox does not support some values, iOS Safari can not make it work in WebView, etc.

Those properties clearly don’t meet our requirement to be added as utilities in v5, as of now. I’ll keep this open for further discussions–and keep an eye on this for v6?

[mdo]

Closing for now given this is maybe something we’d do in v6.