[scroll-size-offset]

[argyleink]

https://jsfiddle.net/jomx0a25/18/

https://twitter.com/fernap3/status/1499500014191538181?s=20&t=aOoxAt72scj6pplcW6u5qQ

goal is to have a sticky header but also have the scrollbar appear to be never under the header while content can.

[fernap3]

This seems to be a pretty common pattern on iOS where you have scrollable content that can scroll under a header or footer.

Another way to visualize this would be to have something like overflow: scroll-visible which would behave like overflow-scroll but without the scrollable content being clipped by the scroll container's bounds. Then you could position the scroll container below the header, with no overlap.

I don't think there's any way to currently implement this use case on the platform without resorting to extreme hacks like duplicating scrolling content.

[fernap3]

I believe we would need to allow offsets for each end of each dimension...inline-start, inline-end, block-start, block-end. There are standardized scrollbar CSS properties but they are only implemented in Firefox. I don't know if that's likely to ever come back to life but one idea would be to model new properties off of those ones:
scrollbar-offset-top, scrollbar-offset-bottom, scrollbar-offset-left, scrollbar-offset-right (and/or flow-relative versions of those names).