[css-scrollbars] Suggestion: "Overflow styling" / Scrollbar styling #107
Description
Hello!
I don't really know if this is the correct place to post suggestions, but I will do it anyway.
If this isn't the correct place, please correct me and tell me where I have to post my suggestion.
Ok, so yeah, I've been working on my web-app and there are a few things I don't like about the scrollbars. My biggest problem is, that I have no possibility to style my scrollbars properly. In Chrome / webkit are a few options, but they are prefixed and not supported in all browsers.
As well as the "Overflow: overlay" spec.
So my suggestions are the following:
Webkit did already a good job on styling scrollbars with pseudo elements, so why don't accept them as a standard:
selector:-webkit-scrollbar
selector:-webkit-scrollbar-button
selector:-webkit-scrollbar-track
selector:-webkit-scrollbar-track-piece
selector:-webkit-scrollbar-thumb
selector:-webkit-scrollbar-corner
selector:-webkit-resizerI like the idea of the different states too
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactiveIf you don't know the styling possibilities in webkit, please check this article: https://css-tricks.com/custom-scrollbars-in-webkit/
There is something I really don't like, its the "overflow: overlay" property.
If you don't know the "overflow: overlay" property, follow this link: http://quirksmode.org/css/css2/overflow.html
Basically the overflow property is there for deciding if the element should have a scrollbar or not.
These are the standard values which all browsers support:
visible - content is not clipped, thats why there cant be any scrollbars
hidden - content is clipped but without scrollbars
scroll - content is clipped but with scrollbars (always visible)
auto - the content is clipped but with scrollbars (visible if content is overflowing)And now the overlay value:
overlay - content is clipped, scrollbars are always visible but are rendered above the containerThis kind of value isnt ment to be in the overflow property, it should be a styling option for the ":-webkit-scrollbar" pseudo element:
selector:-webkit-scrollbar {
position: absolute;
}This would be equal to the "overflow: overlay" property.
Unfortunately the ":-webkit-scrollbar" pseudo element currently doesn't accept the "position" property.
In short:
The idea is to implement scrollbars as pseudo elements on elements which are displaying scrollbars by the correct setting of the property "overflow". On the pseudo element ":-webkit-scrollbar" the property "position" can be applied for custom positioning and achieving of the "overflow: overlay" effect. In the final standard the pseudo elements should work without any prefix of course.
I hope you understand my idea of scrollbar styling and the, in my opinion obsolete property "overflow: overlay". Any feedback to my suggestion is highly appreciated! :)
Best regards!