[css-overflow] Infinite scrolling

[SebastianZ]

Infinite scrolling means the content of a scroll container is starting at the beginning again when you reach its end.

In the discussion in #5275 (comment) two use cases were mentioned for supporting infinite scrolling, maps and (image) galleries.

To cover those cases, I suggest adding a new value infinite (name to be discussed) to the overflow property and its longhands overflow-x and overflow-y.
Setting this value turns a box into a scroll container without displaying a scrolling mechanism like a scrollbar. When scrolling beyond the end of the box's content, the beginning fragment of the box's content is rendered up to the box's padding edge. If you scroll beyond the start of the box's content, the ending fragment of the box's content is rendered accordingly.

Example:

Here's a box containing ten horizontally left-to-right aligned elements numbered from 1 to 10 with overflow-x: infinite; scrolled to the right beyond the 10th element:

As you can see, the first element is drawn again.

Sebastian

[SebastianZ]

Btw., if the box doesn't have scrollable overflow, it behaves like hidden.

Sebastian

[tabatkins]

Feels kinda odd that if a 100px-wide scroller has a single 90px-wide child, it'll act like hidden, but if it the child is 110px wide, it'll loop itself. Maybe I'm overthinking it?

[SebastianZ]

Feels kinda odd that if a 100px-wide scroller has a single 90px-wide child, it'll act like hidden, but if it the child is 110px wide, it'll loop itself. Maybe I'm overthinking it?

I just took that from the auto value. What I actually wanted to say with that is that the content will just get displayed as is in that case. It won't get fragmented or duplicated or anything fancy.

Though, re-thinking this, users probably expect the behavior to be the same in both cases. I.e. we might say that the empty space will be fragmented like an element in that case.

So, picking up your example of a 100px-wide scroller with a 90px-wide child, you'd still be able to scroll. That means, the child and the 10px empty space would be fragmented so that they always fill up the 100px width of the scroller.

So, showing my perfect drawing skills again 😉 using the example from above, that would then look like this when being scrolled:

Sebastian

[Que-tin]

Came here from the carousel explainer. I was wondering if this might bring some accessibility issues along with it.

Imagine having a cyclic overflow with links in it:

1. How will a keyboard user be able to escape a cyclic overflowing container? Will it just visually overflow?
2. If the item is fragmented as in the example above is this one item and focued on both fragments?

Comments independet of focusable elements:

1. Is an ::after enough to be used as kind of an indicator to show that a new cycle is starting and the conent starts to repeat itself?
2. I really like the idea but I'm not sure if it does not bring more potential harm then benefit. It feels like there is a high risk of people using it incorrectly and therefore e.g. block scrolling on their page because of > 100vb high element with overflow-y: infinite.