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-top || left || 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.
• Zero.

For an element E with 'scroll-snap-vertical' 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.
• Zero.

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 snapping positions at the end of the scrolling gesture.

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

Similarly for 'scroll-snap-horizontal'.

UAs can decide which scrolling mechanisms are subject to scroll snapping. For example, a UA might apply scroll snapping to touch-based panning and keyboard-driven scrolling but not scrollbar thumb dragging. Script-driven scrolling (e.g. setting scrollLeft or scrollTop) is never affected by scroll snapping.

The details of snapping behavior are up to the UA.

Issues

• How to handle RTL