[css-snappoints][css-scroll-snap] 1D vs. 2D (diagonal) snapping

The current scroll-snappoints spec has a major shortcoming: it can only
specify scroll-snapping in two axes at once.
   http://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/

Many use cases (arguably the most common ones) want scroll-snapping
in only one axis. In the degenerate case of having only one scrollable
axis, there is of course no interference, and the user is happy. But
as it frequently happens that the page is wider than the window, this
is not always the case, and the user will get snapping in both axes
even if this is undesirable.

As a second point, there are two ways of interpreting 2-axis snapping
preferences:
   * Each axis independently (edge-snapping)
   * Both axes together (point-snapping)

The first example is what's most often wanted for gridlike page layouts:
you can proximity-snap your columns to the center, or rows to the center,
or both. The snapping triggers even if an item is centered only in a
single axis, e.g. if a photo is centered vertically but not horizontally,
it snaps vertically but not horizontally.

The second example is what would be wanted for a maplike layout: you can
proximity snap items to positions within the viewport, but the snapping
only triggers when both axes are satisfied. For example, if the photo
were centered vertically but not horizontally, it would not snap--it
would only snap if is centered both vertically and horizontally. Such
cases would work best in a panning mode, for they often require diagonal
scrolling to satisfy the snap positions.

Since the first case is arguably the most common, we think the CSS
scroll snapping model should make it a) possible and b) easiest for
authors to specify.

========================================================================

To this end, Tab and I had specified the syntax of 'scroll-snap-align'
to allow specifying alignment in either or both dimensions, and added a
switch for whether a 2-axis alignment is interpreted as a point or as
independent alignments (with the default being independent alignment).

However, following that roc pointed out that it would also be nice if
the scroll container could control whether it cared about snap positions
in one or both axes, so we are thinking it would be a good idea for this
information to be specified along with the scroll-snap-type (and whether
we are point-snapping or axis-snapping) on the scroll container, e.g.

   scroll-snap-type: none | [ proximity | mandatory | trap ] ||
                            [ x | y | block | inline | both | point ]

We have therefore incorporated this set of changes into our alternate
model draft as well.

(Note that scroll-snap-align still allows both 1-axis and 2-axis values,
since a box may need to only specify one; it's just that one axis may be
ignored as determined by the scroll container.)

~fantasai and TJ

Received on Sunday, 25 October 2015 04:27:18 UTC