Gecko:CSSScrollSnapping: Difference between revisions
| Line 25: | Line 25: | ||
* Zero. | * Zero. | ||
When scrolling an element with 'scroll-snap-vertical:mandatory' using 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: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 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 | 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'. | 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 <tt>scrollLeft</tt> or <tt>scrollTop</tt>) is never affected by scroll snapping. | |||
The details of snapping behavior are up to the UA. | |||
== Issues == | == Issues == | ||
* How to handle RTL | * How to handle RTL | ||
Revision as of 06:01, 15 August 2013
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