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.

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