Open emilio opened 2 years ago
Ah, I guess per spec overflow-clip-margin
doesn't apply at all to scrollable boxes...
That seems a bit unfortunate, since at least content-box
and padding-box
seem useful on those (we probably can't expand the clip though, as per the above...).
Supporting visible scrollable overflow outside of the border-box could also be useful for certain niche use cases, such as tech demos e.g. https://twitter.com/justinfagnani/status/1569725232017199104 or effects like using a backdrop-filter: blur to create a glassy view of content which hasn't scrolled into view yet.
@emilio What does it mean when you clip to the content-box on a scroll container? Where does the scrollbar go? If you scroll to the top/bottom of the scrollable range, is the content that would have been in the padding area clipped or is the viewport into the scrollable overflow area reduced? If it's reduced, what's the initial scroll position, can you see all the top of the content or is it invisible in the padding area?
How does this make any sense?
@fantasai I guess the use case where we use the equivalent of content-box
for compatibility (<input>
elements) can't have scrollbars, so they don't have to answer those questions.
@emilio does overflow: clip
work for your use-case then?
We can look into supporting this property if overflow
is hidden
, that would avoid complications with scrollbars @fantasai pointed out. Reasoning about this with scrollbars isn't worth it unless there is a strong use-case.
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.
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:
Edit: removed unnecessary context on workarounds
Another place that a feature like this would be useful is in conjunction with visible states (e.g. :focus
or :focus-visible
) wherein content is added outside of the border-box of content within a scroll area. This can come to bear as in this image:
(source: adobe/spectrum-css#1336 )
There are reciprocal techniques (e.g. using extra padding internal to the parent, etc.) that you could do today that allow for managing this correctly. However, the idea that content can exist outside of the border-box feels like something that would be better to manage outside of the parent as well. Seeing scroll clipping work as outlined in @matthewferry's screenshots would be a great way to open up this reality.
The CSS Working Group just discussed [css-overflow] How does overflow-clip-margin: border-box behave on a scroll container?
.
In https://scroll-driven-animations.style/tools/view-timeline/ranges/ I needed exactly this ability as described above. 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, 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).
@bramus I think there are two use cases outlined here. One of them is the chat messages example from @matthewferry, where the clip rect for the scrollable overflow is defined by layout (of an ancestor).
But another is the example given by @Westbrook and @argyleink, where there's some kind of ink overflow and they want to let it overflow the scroller. For those, applying overflow-clip-margin
would make more sense. These can often be worked around by increasing the padding within the scroller, though (which would also be useful if, for example, the author later decided to add a background color or border to the scroller), so I'm not sure how necessary it is to add... though if we're already having infinitely overflowing scrollable overflow, making a fixed overflow-clip-margin
also work is probably not that hard.
Personally, I am leaning to something like a keyword (or maybe a new value?) for overflow, e.g.
overflow-y: scroll visible;
That would work, too!
Usually the border of the scrollable area is outside. What should happen on a scrollable box when you set
overflow-clip-margin: border-box
?Are you supposed to make the contents overlap the border area? If so, what happens with classic (Windows-like) scrollbars, which are inside the border area? I'm not sure how that would work.
cc @chrishtr @khushalsagar