Gecko:CSSScrollSnapping

Proposal

scroll-snap-vertical: none | proximity | mandatory

scroll-snap-horizontal: none | proximity | mandatory

scroll-snap: none | proximity | mandatory (shorthand setting both vertical and horizontal)

These properties apply to scrollable elements. Values are defined similar to the Microsoft scroll-snap-type property. The default value is "none".

A scrollable element is one for which 'overflow-x' or 'overflow-y' is 'scroll' or 'auto'.

scroll-snap-edge: none | [ margin-left || margin-start || margin-top || left || start || top ]

This property defines which (if any) edges of the first CSS box for the element contribute to the allowable snapping positions for the nearest scrollable ancestor.

For an element E with 'scroll-snap-vertical' not 'none', the set of vertical snapping positions is the union of

• For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' contains 'margin-top', the top edge of the first margin-box of D if there is one.
• For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' contains 'top', the to edge of the first border-box of D if there is one.

For an element E with 'scroll-snap-horizontal' not 'none', the set of horizontal snapping positions is the union of

• For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' contains 'margin-left', the left edge of the first margin-box of D if there is one.
• For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' contains 'left', the left edge of the first border-box of D if there is one.

Transformation of a box edge up to the coordinate space of the scrollable element takes into account CSS positioning but not CSS transforms (so the orientation of the edge is guaranteed to be preserved).

When scrolling an element with 'scroll-snap-vertical:mandatory' using selected UA scrolling mechanisms, the vertical offset gravitates to one of the vertical snapping positions at the end of the scrolling gesture. If the set of vertical snapping positions is empty, the vertical offset gravitates to zero.

When scrolling an element with 'scroll-snap-vertical:proximity' using selected UA scrolling mechanisms, the vertical offset gravitates to one of the vertical snapping positions at the end of the scrolling gesture, if it's "sufficiently close" to a snapping position.

Similarly for 'scroll-snap-horizontal'.

UAs should apply scroll snapping to all user scroll gestures (including keyboard, scrollbars, etc). Script-driven scrolling (e.g. setting scrollLeft or scrollTop) is never affected by scroll snapping.

The details of snapping behavior (physics) are up to the UA.