Gecko:CSSScrollSnapping: Difference between revisions
| Line 1: | Line 1: | ||
== Proposal == | == Proposal == | ||
<tt>scroll-snap | <tt>scroll-snap: none | proximity | mandatory</tt> (shorthand setting both x and y) | ||
<tt>scroll-snap- | <tt>scroll-snap-y: none | proximity | mandatory</tt> | ||
<tt>scroll-snap: none | proximity | mandatory</tt> | <tt>scroll-snap-x: none | proximity | mandatory</tt> | ||
These properties apply to scrollable elements. Values are defined similar to the Microsoft [http://msdn.microsoft.com/en-us/library/ie/hh772038%28v=vs.85%29.aspx scroll-snap-type] property. The default value is "none". | These properties apply to scrollable elements. Values are defined similar to the Microsoft [http://msdn.microsoft.com/en-us/library/ie/hh772038%28v=vs.85%29.aspx scroll-snap-type] property. The default value is "none". | ||
| Line 15: | Line 15: | ||
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. | 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- | For an element E with 'scroll-snap-x' 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. | |||
For an element E with 'scroll-snap-y' 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 '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 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. | ||
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). | 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- | When scrolling an element with 'scroll-snap-y: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- | When scrolling an element with 'scroll-snap-y: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- | Similarly for 'scroll-snap-x'. | ||
UAs should apply scroll snapping to all user scroll gestures (including keyboard, scrollbars, etc). Script-driven scrolling (e.g. setting <tt>scrollLeft</tt> or <tt>scrollTop</tt>) is never affected by scroll snapping. | UAs should apply scroll snapping to all user scroll gestures (including keyboard, scrollbars, etc). Script-driven scrolling (e.g. setting <tt>scrollLeft</tt> or <tt>scrollTop</tt>) is never affected by scroll snapping. | ||
The details of snapping behavior (physics) are up to the UA. | The details of snapping behavior (physics) are up to the UA. | ||
Revision as of 09:26, 4 December 2013
Proposal
scroll-snap: none | proximity | mandatory (shorthand setting both x and y)
scroll-snap-y: none | proximity | mandatory
scroll-snap-x: none | proximity | mandatory
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-x' 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.
For an element E with 'scroll-snap-y' 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.
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-y: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-y: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-x'.
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.