[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.