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

In https://scroll-driven-animations.style/tools/view-timeline/ranges/ I needed **exactly** this ability [as described above](https://github.com/w3c/csswg-drafts/issues/7246#issuecomment-1486532999). In my case, the scroller _(blue bordered box)_ should scroll its content _(the `aliceblue` rectangle)_, yet all that overflows should be kept visible for demonstration purposes.

To make it work, I turned to faking it entirely by creating a faux scroll interface _(mimicking the MacOS scroll UI)_, layering some things, and manually translating the scroller’s content via JS as one scrubs the faux scrollbar.

If there was some simple way say _“do scroll the y axis but keep the overflow visible”_, this workaround would not have been needed, and the UI would look good on all platforms.

Same thing goes for the chat example [above](https://github.com/w3c/csswg-drafts/issues/7246#issuecomment-1486532999), having it applied to the `<chat-messages>` list. It’s wrapping `<chat-widget>` could still have overflow set to hidden so things don’t bleed out of the widget itself. 

Personally, I am leaning to something like a keyword _(or maybe a new value?)_ for overflow, e.g. `overflow-y: scroll visible;`. Advantage to having a keyword is that you don’t need to know the specific height of any sibling element (e.g. the `<chat-header>` and `<chat-form>` in case of the chat UI).

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


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

Received on Wednesday, 17 May 2023 17:17:11 UTC