[css-overflow-5][css-scroll-snap-2] Snapping and generating scroll-marker pseudo-elements from fragments (original) (raw)

For common carousel patterns as outlined in #9745, developers will have content being fragmented into different boxes. Often, developers want to create an interface that scrolls through these fragments by pages, e.g. demo. Similarly, for existing column fragmentation use cases developers may wish to snap to particular columns. Issues #6017 and #5911 both have prior discussion on snapping specifically.

As with snapping, it would be very convenient to be able to generate a ::scroll-marker pseudo-element per generated fragment to set up automatic markers based on the available space and number of resulting fragments the content ended up needing.

This explores the two issues together as they feel similar in nature, though we don't necessarily have to resolve on the same solution for both.

For the examples below, we have the following common styles:

.scroller { overflow: auto; height: 80vh; scroll-snap-type: x mandatory; columns: 1; /* Fragment content to horizontally scrollable full pages */ }

Options:

  1. Support scroll-snap-align (as suggested in [css-multicol-2][css-scroll-snap] Snapping to column boxes #6017) and ::scroll-marker pseudo-elements on a ::fragment selector1. This would allow a paginated carousel-like snapping experience to be created as follows:

    Item 1
    Item 2
    ...
    Item n

  2. Make scroll-snap-align (as suggested in [css-scroll-snap] Scroll snap areas for fragmented boxes (like in css-multicol) #5911) and ::scroll-marker fragment aware. As per @tabatkins comment in the linked issue this seems to be the way that firefox behaves for scroll-snap-align already. If we go this way we may decide whether that ::scroll-marker should behave the same as well or that it should have a different solution. For our common example, this would require the use of a wrapping element to establish the fragment snap areas and markers:

    Item 1
    Item 2
    ...
    Item n

  3. Introduce fragmentation aware values for these selectors / properties. This would provide a bit more capability as authors could specify for each sytled element which one should have its fragmented parts should generate a snap areas and/or scroll markers. Similar to option 2, this would also require wrapping the content for our common example case:

    Item 1
    Item 2
    ...
    Item n

  4. Support scroll-snap-align (as suggested in [css-multicol-2][css-scroll-snap] Snapping to column boxes #6017) and ::scroll-marker pseudo-elements on a ::column selector. This would allow a paginated carousel-like snapping experience to be created as follows:

    Item 1
    Item 2
    ...
    Item n
    This is similar to option 1, however is more clear about what is being styled. I think developers could think about this as decorating the columns, and the properties may not need to be inherited to the elements in the columns.

  5. Note that the current spec uses ::nth-fragment, however having a single element inherit different styles per fragment introduces significant implementation complexity. As such, we would propose initially resolving to go with a single ::fragment style (i.e. the syntax mentioned in the inline issue) ↩