search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.52k stars 673 forks source link

[css-overflow] Infinite scrolling #5411

Open SebastianZ opened 4 years ago

SebastianZ commented 4 years ago

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

In the discussion in https://github.com/w3c/csswg-drafts/issues/5275#issuecomment-664650327 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:

Infinite scrolling

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

Sebastian

SebastianZ commented 2 years ago

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

Sebastian

tabatkins commented 2 years ago

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 commented 2 years ago

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:

Element with `overflow-x: infinite;` and a single element that is narrower than it

Sebastian

Que-tin commented 5 months ago

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.