Re: [w3ctag/design-reviews] CSS Scrollbars: scrollbar-color, scrollbar-width (#563)

I've had a night to sleep on this and I have some additional thoughts:

There is a real need from developers to be able create their own custom scroll UI. This means we shouldn't make too any assumptions about the dimensions of scroll chrome. We can't expect the width of a custom vertical scrollbar and the height of a custom horizontal scrollbar to always be the same. If we consider different types of UI (such as a carousel for example) the requirements will potentially be very different from native scrollbars as well.

With this in mind, I would propose that we treat the `scroll-gutter` as an extra 'shell' in the box model. One that lives in between the padding and the border. I realize this is a big change, but I think it will be worth it.

Just as we have a single `border-width` property that applies to all borders and separate `border-bottom-width`, `border-left-width`, `border-right-width` and `border-top-width`, I think it would make sense to have a `scrollbar-width` property as well as `scrollbar-bottom-width`, `scrollbar-left-width`, `scrollbar-right-width` and `scrollbar-top-width` properties.

Additionally, if devs are going to use `scrollbar-width: 0px` to hide native chrome, they may still want to be able to make use of a `scroll-gutter`, to make room for their own custom UI elements. With that in mind, I think it would make sense to give devs the ability to apply explicit dimensions to the `scroll-gutter` as well. So we'd have a `scroll-gutter` property as well as `scroll-gutter-bottom`, `scroll-gutter-left`, `scroll-gutter-right` and `scroll-gutter-left` properties.

We could keep the `auto` and `thin` values currently proposed for `scrollbar-width` and make them applicable to `scroll-gutter` as well. This would allow styles such as the following:

```
.native-scrollbar-scroller {
    scrollbar-width-right: auto;
    scroll-gutter-right: auto;
    
    scrollbar-width-bottom: thin;
    scroll-gutter-bottom: thin;
}

.custom-carousel-scroller {
    scrollbar-width: 0px; // hide native chrome
    scroll-gutter-bottom: 4px; // room for an indicator at the bottom
    scroll-gutter-left: 1.5rem; // room for a button on the left
    scroll-gutter-right: 1.5rem; // room for a button on the right
}
```

This would eliminate a lot of the complexities that lead to the need for a scroll-gutter css unit as well. Devs can instead just use existing units to set the desired dimensions explicitly. Browsers could still implement their own default scrollbar width like they do now and that would be enough to maintain backwards compatibility.

Finally, for the sake of simplicity I would like to suggest we drop `scrollbar-width: thin` all together. It seems to me the choice between `scrollbar-width: auto` and `scrollbar-width: thin` is ultimately a design decision, so asking for an explicit value rather than some magic value probably isn't a big deal.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/563#issuecomment-786023007