[css-overflow][css-scroll-snap] Introduce mechanism to extend scrollable overflow area to make snap points reachable

[johannesodland]

Problem

It is possible to define unreachable snap points. The used snap position will then be the position resulting from scrolling as much as possible towards the snap position.

But, in many components, such as galleries and carousels, you want the user to be able to reach those snap points.

Current solution

The current solution is to add padding, or ::before and ::after pseudo elements to increase the scrollable overflow area so that the snap points can be reached.

It is not always possible to use CSS to exactly match the needed area. It is often necessary to use JS to calculate this area so that the scroll container can be scrolled exactly to the snap points, but not further.

To be able to build pure CSS scroll snap components, we need a way to be able to extend the scrollable overflow area so that all snap points can be reached.

Proposal

Add a property to control the scrollable overflow area.

scrollable-overflow-area: [ normal | include-snap-points ]

(Names up for bikeshedding.)

<div class=gallery>
  <img ...><img ...><img ...>
</div>

.gallery {
  scroll-snap-type: inline mandatory; 
  scrollable-overflow-area: include-snap-points;
}

.gallery img {
  scroll-snap-align: center;
}

Alternatives

• Extend padding properties with a keyword to extend padding enough to make snap points reachable.
• Expose the necessary sizes as values that can be used to size padding or ::before and ::after elements.

[fantasai]

@majido What do you think about this idea?

[johannesodland]

Such a property could be used to control the scrollable overflow area in more ways:

scrollable-overflow-area: normal | include-snap-points || include-padding || include-negative

(Names up for bikeshedding.)

include-padding
Include the end-side padding

include-negative
Include boxes outside block-start or inline-start padding edges, that are otherwise discarded.

include-snap-points and include-negative would possibly interact with the scroll-an-element algorithm, otherwise the negative scroll area would not be reachable.

[fantasai]

Note, we already are including end-side padding, see #129

Allowing for negative positioning as well seems pretty interesting.

Some possible bikeshedding:

scroll-area: normal | include-negative || include-snap

or

scroll-contain: normal | negative || snap

[johannesodland]

Note, we already are including end-side padding, see #129

Nice! I didn't realize that the issue had been resolved.