Re: [csswg-drafts] [css-overflow] How does overflow-clip-margin: border-box behave on a scroll container? (#7246)

Personally, I have _definitely_ wanted to have `overflow: scroll` where the clip is _outside_ the `<visual-box>`, but where the scrollbars stay inside the `<visual-box>`. This is especially useful where you want the content to flow behind or on top of an adjacent element but want the scrollbar to stay _within the visual-box_ and not end up moving behind/on top of the adjacent element. 

### Desired behavior
Admittedly, I'm not sure I fully understand the limitations/complications with scrollbars as mentioned above, so maybe this just isn't possible to support `overflow-clip-margin` with `overflow: scroll`, but here's a quick visual describing what would be desired:

![overflow-clip-margin](https://user-images.githubusercontent.com/895885/228187175-3e4e45fc-3d7b-4177-a58e-7d422ea9146e.png)

### Limitations of today
Today, to achieve something like the above, the only way is to hide the native scroll and use javascript and css transforms to create a new scrollable area with a custom scrollbar (e.g. this is how Slack achieves chat flowing behind the bottom text input but with a scrollbar that stops before the input). The only CSS ways are to use negative margins or positioning, but this means scrollbars end up awkwardly colliding with neighboring elements either behind or on top.

| Clipped/colliding scrollbar behind | Scrollbar on top of element that isn't part of desired scroll area |
|--------|--------|
| ![collision scrollbar](https://user-images.githubusercontent.com/895885/228176389-9cdf252a-bdeb-49c5-b08e-9f837a7b6bf1.png) | ![scrollbar intersecting elements outside desired scroll area](https://user-images.githubusercontent.com/895885/228178946-0ccaab8d-0de8-48e1-b277-06fe808de8ab.png) | 


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


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

Received on Tuesday, 28 March 2023 09:38:29 UTC