[css-scroll-snap] Choosing a snap position when children have mixed scroll-snap-align values

[whsieh]

(Concerning the Scroll Snap Module Level 1 spec here: https://www.w3.org/TR/2016/CR-css-scroll-snap-1-20161020)

Suppose we have a scroll snap container with 4 children arranged in a 2 by 2 grid, and suppose the children have various mixed values for scroll-snap-align, such as center none, none center, and center. For simplicity, let's say that scroll-snap-margin and scroll-padding are all 0 on the children and container, respectively, and that the scroll-snap-type is both mandatory. Please see the attached diagram for an example.

Given an initial scroll position and a target scroll position where one would normally land in the absence of scroll snapping, what are some guidelines we should follow when selecting the best snap position to land on?

One naive approach is this: model the snap position emitted by each snap area as a line segment, with a start and end position (if neither block or inline axes are none, these positions are the same). For each snap area, compute the point on its line segment closest to the target scroll position. The snap position to choose is then the closest of these closest positions, as long as this position is in the same direction from the initial scroll position as the target scroll position.

Does this seem reasonable?

[tabatkins]

You do indeed model them all separately. Each element, based on its laid-out position and its scroll-snap-align, contributes a scroll snap position - a particular scroll offset that it would like the scroller to settle on.

Once you filter the elements you want to pay attention to (you don't want to snap to things positioned way off-screen, as it would be confusing), then you have a set of possible snap positions to pay attention to. Then, based on the scroll offset the scroller would naturally land on, you might choose one of the snap positions to instead land on ("might" if it's proximity; "must" if it's mandatory).

The spec should define all of this. What parts did you find incomplete or confusing?

[grorg]

I think @whsieh's question was related to whether an alignment axis contributes multiple points. In his diagram, imagine you start scrolling at 45 degrees South East. You could technically snap to the point in the bottom left, or along the lines on the right.

So his idea is to treat all snap positions as line segments (where a point is just a zero length segment). You then find the closest point on any of the line segments to use as the snap destination.

i.e. each element contributes a scroll snap line segment, not a scroll snap position.

[tabatkins]

(Note - since we were asked to defer the 2d snapping, there are no "points" in snapping. Center-aligning just independently adds vertical and horizontal snap positions which are independently chosen - you might get a vertical center-alignment from the element, while you're horizontally snapped to a different element.)

I'm slightly confused. Is this any different than "filter for elements you want to pay attention to, then use their snap positions"?

[whsieh]

since we were asked to defer the 2d snapping, there are no "points" in snapping. Center-aligning just independently adds vertical and horizontal snap positions which are independently chosen - you might get a vertical center-alignment from the element, while you're horizontally snapped to a different element.

Oh, ok! I think this addresses my concern then. In regards to the example I posted, since we can only specify a scroll snapping container that takes vertical and horizontal snap positions into account separately (using scroll-snap-type: both mandatory) we won't have to resort to making snap areas contribute line segments.

Just to make sure though -- this would mean that the above example would behave as if all of the child elements had scroll-snap-align: center?

[tabatkins]

@whsieh Not quite. If the viewport is sufficiently large such that there's always a horizontal-center and vertical-snap in view from each row/column, yeah, but given large elements and a small viewport, you can have situations where there is, for example, no horizontal snap position in view to snap to, while there is a vertical one (such as if a small viewport was hovering over the top-left element in your example).