A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

[Proposal] a new CSS feature of overflow


We proposed a new CSS attribute “overflow-propagation-”. You can see the details and the motivation in our article. Here is the summary of our new features.

overflow-propagation- has four attributes corresponding to four scroll directions:

  • overflow-propagation-up

  • overflow-propagation-down

  • overflow-propagation-left

  • overflow-propagation-right

two attributes values:

  • normal: child nodes scroll first

  • parent: parent nodes scroll first

Normal type uses the original logic of scrolling, when the child node scrolls to the end then call the father node to consume the rest scrolling. Parent type is the opposite of the normal type, the father node always consumes the scrolling first.

When we scroll up and down, sometimes we don’t need the scroll latch. So we proposed a CSS attribute to cancel the scroll latch.

continuous-scroll : continuous;

We think giving developer the right to set the logic of the scroll propagation on the scroll chain can improve user’s experience on the web. This feature is meaningful on making web’s performence closer to the original client especially on webapp. We will appreciate it if you give your suggestions.


Does this relate to the CSS Overscroll Behavior proposal?


overflow-behavior doesn’t include our new feature. The feature we proposed is to change the logic of the default scroll chain. Default scroll chain is always scrolling the child node first, but sometimes scrolling the father node first is expected by users . So this new feature is to solve this problem.


Interesting proposal. Some questions:

The directions on overflow-propagation are the finger direction, right? I think it would be better to use the page scroll direction to be agnostic to the method used to scroll. So in the given examples you scroll the page down but mention that you’re using overflow-propagation-up - I think it should be overflow-propagation-down.

I’m assuming you set overflow-propagation on the child node. Say you have this scenario:

    --> Child  (overflow-propagation-down: parent)
        --> Grandchild

Say you start scrolling down over the grandchild. What is the expected order of scrolling? Is it Grandchild -> root -> Child? If you now add overflow-propagation-down: parent to the grandchild, is it root->child->grandchild?

Also, what should happen when the user switches direction mid-scroll? Should the overflow-propagation direction be determined only at the start of a scroll?