Re: [csswg-drafts] [css-overflow-4] drawing over the space reserved by `scrollbar-gutter` (#5232)

Thanks, I understand the problem a lot better now. Did you see my suggestion here: https://github.com/w3ctag/design-reviews/issues/563#issuecomment-786023007?

I suggested to treat the `scroll-gutter` as another layer in the box-model that applies independently from the `scrollbar-width`. I just noticed I never addressed there how a gutter-box would be different from a padding-box. I think the defining property of a gutter-box should be that scroll chrome *always* gets rendered as an overlay on top of the gutter. I think that would allow for some pretty decent solutions.

Let's keep the todo-list example, with the following markup :
```html
<div class="view">
    <div class="header">Check all <input type=checkbox></div>
    <ul class="list">
        <li class="item">Lorem ipsum dolor sit amet <input type="checkbox" /></li>
        <li class="item">Consectetur adipiscing elit <input type="checkbox" /></li>

        <!-- ... -->

        <li class="item">Id est laborum <input type="checkbox" /></li>
    </ul>
</div>
```

If we assume that `scrollbar-width: auto;` is the default, styles for the todo-list could be something like:
```css
.header, .list {
    scroll-gutter-right: auto; /* gutter-width matches scroll-width: auto; */
}
.item {
    scroll-gutter-right: match-parent;
}
```

Thin scrollbars with matching thin gutters could be achieved like this:
```css
.header {
    scrollbar-gutter-right: thin;
}
.list {
    scrollbar-width: thin;
    scroll-gutter-right: thin;
}
.item {
    scroll-gutter-right: match-parent;
}
```

Perhaps some interesting things like this might be in the cards too:
```css
.view {
    scrollbar-width: 8px; /* .list inherits this width */
}
.header, .list {
    scroll-gutter-right: scrollbar-width; /* Match the scrollbar-width from nearest ancestor */
}
.item {
    scroll-gutter-right: match-parent;
}
```

I realize allowing people to set both `scroll-gutter` and `scrollbar-width` explicitly allows for styles that might seem a bit nonsensical at first glance. For example, there is nothing stopping someone from giving an element a `scroll-gutter` that's narrower than the `scrollbar-width`, but I don't really think that's a problem. Someone will probably actually find a creative use for it.

-- 
GitHub Notification of comment by Rayraz
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5232#issuecomment-788158576 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 1 March 2021 18:12:01 UTC