Gecko:CSSScrollSnapping - Revision history

Roc: /* Proposal */

2014-03-04T22:15:03Z

Proposal

← Older revision		Revision as of 22:15, 4 March 2014
Line 23:		Line 23:

	The algorithm for computing which snapping opportunity (if any) to take is gesture and UA dependent. However the following constraints must be honored:		The algorithm for computing which snapping opportunity (if any) to take is gesture and UA dependent. However the following constraints must be honored:
	* When scrolling along an axis for which 'scroll-snap-type' is 'mandatory', the UA ~~should settle on a scroll position which matches~~ one of the snapping opportunities for that axis. However this requirement is lifted if one or more of the snapping opportunities' boxes B is larger than the scroll-port.		* If the scroll gesture has a definite direction (this is UA-dependent, but it includes clicking on scrollbar buttons or pressing up/down keys), the UA must not choose a snapping opportunity that makes the gesture result in scrolling in the opposite direction.
			* When scrolling along an axis for which 'scroll-snap-type' is 'mandatory', the UA must choose one of the snapping opportunities for that axis (if there are any valid opportunities, subject to the previous requirement). However this requirement is lifted if one or more of the snapping opportunities' boxes B is larger than the scroll-port.
	* When 'scroll-snap-type' is 'none' for some axis, no scroll snapping occurs along that axis.		* When 'scroll-snap-type' is 'none' for some axis, no scroll snapping occurs along that axis.

	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. Layout changes that affect the positions of elements with 'scroll-snap-edges', or dynamic changes to values of 'scroll-snap-edges', do not trigger snapping in the absence of a scroll gesture, even if 'mandatory' snapping is requested.		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. Layout changes that affect the positions of elements with 'scroll-snap-edges', or dynamic changes to values of 'scroll-snap-edges', do not trigger snapping in the absence of a scroll gesture, even if 'mandatory' snapping is requested.

Roc: /* Proposal */

2014-03-04T21:58:14Z

Proposal

← Older revision		Revision as of 21:58, 4 March 2014
Line 22:		Line 22:
	These definitions implicitly require transforming a box rectangle up to the coordinate space of the element E. When CSS transforms are present, preserve axis-alignment by using the smallest axis-aligned rectangle that contains the transformed box.		These definitions implicitly require transforming a box rectangle up to the coordinate space of the element E. When CSS transforms are present, preserve axis-alignment by using the smallest axis-aligned rectangle that contains the transformed box.

	The algorithm for computing which snapping opportunity (if any) to take is gesture and UA dependent. However the following constraints ~~should~~ be honored:		The algorithm for computing which snapping opportunity (if any) to take is gesture and UA dependent. However the following constraints must be honored:
	* When scrolling along an axis for which 'scroll-snap-type' is 'mandatory', the UA should settle on a scroll position which matches one of the snapping opportunities for that axis. However this requirement is lifted if one or more of the snapping opportunities' boxes B is larger than the scroll-port.		* When scrolling along an axis for which 'scroll-snap-type' is 'mandatory', the UA should settle on a scroll position which matches one of the snapping opportunities for that axis. However this requirement is lifted if one or more of the snapping opportunities' boxes B is larger than the scroll-port.
	* When 'scroll-snap-type' is 'none' for some axis, no scroll snapping occurs along that axis.		* When 'scroll-snap-type' is 'none' for some axis, no scroll snapping occurs along that axis.

	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. Layout changes that affect the positions of elements with 'scroll-snap-edges', or dynamic changes to values of 'scroll-snap-edges', do not trigger snapping in the absence of a scroll gesture, even if 'mandatory' snapping is requested.		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. Layout changes that affect the positions of elements with 'scroll-snap-edges', or dynamic changes to values of 'scroll-snap-edges', do not trigger snapping in the absence of a scroll gesture, even if 'mandatory' snapping is requested.

Roc: /* Proposal */

2014-03-04T21:57:54Z

Proposal

← Older revision		Revision as of 21:57, 4 March 2014
Line 13:		Line 13:
	<tt>scroll-snap-edges: none \| margin-box \| border-box \| center</tt>		<tt>scroll-snap-edges: none \| margin-box \| border-box \| center</tt>

	This property defines which (if any) CSS boxes for the element contribute to the allowable snapping positions for the nearest scrollable ancestor. Which edge of the box is used depends on the direction of the scroll operation. For example, when scrolling down, the bottom edge of the box should align with the bottom edge of the scrolling container. More details below.		This property defines which (if any) CSS boxes for the element contribute to the allowable snapping positions for the nearest scrollable ancestor.

	Scroll snapping is applied at the end of each complete scroll gesture (e.g. after releasing the finger at the end of a touch panning gesture, after pressing an arrow key) to potentially adjust the final scroll destination. The vocabulary of scroll gestures, and their scrolling behaviors (e.g. animation physics) depends on UA considerations and is not (and should not be) defined here. However, we require each gesture to have, for each axis, an optional direction; i.e. the horizontal direction can be "left", "right" or "unspecified", and the vertical direction can be "up", "down" or "unspecified". We also require each gesture to have an associated "start scroll position", which may or may not correspond to the actual scroll position at the start of the gesture. (E.g., if the user presses page-down twice quickly, the start position for the second page-down gesture may be the expected final destination of the first page-down gesture, even if the scrolling for that gesture hasn't completed yet.)		Scroll snapping is applied at the end of each complete scroll gesture (e.g. after releasing the finger at the end of a touch panning gesture, after pressing an arrow key) to potentially adjust the final scroll destination. At the end of a scroll gesture which scrolls an element E, the UA determines a set of potential snapping opportunities:

	At the end of a gesture which scrolls an element E, the UA determines a set of potential snapping opportunities:
	* For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' is 'margin-box', let B be D's first fragment's margin-box. If B exists, then each edge of B can be snapped to the corresponding edge of E's scroll-port.		* For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' is 'margin-box', let B be D's first fragment's margin-box. If B exists, then each edge of B can be snapped to the corresponding edge of E's scroll-port.
	* For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' is 'border-box', let B be D's first fragment's border-box. If B exists, then each edge of B can be snapped to the corresponding edge of E's scroll-port.		* For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' is 'border-box', let B be D's first fragment's border-box. If B exists, then each edge of B can be snapped to the corresponding edge of E's scroll-port.
	* For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' is 'center', let B be D's first fragment's border-box. If B exists, then the center of B can be snapped to the center of E's scroll-port.		* For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' is 'center', let B be D's first fragment's border-box. If B exists, then the center of B can be snapped to the center of E's scroll-port.

	These definitions implicitly require transforming a box rectangle up to the coordinate space of the element E. ~~These transformations must take into account CSS positioning but not~~ CSS transforms ~~(so~~ the ~~orientation of boxes is guaranteed to be preserved)~~.		These definitions implicitly require transforming a box rectangle up to the coordinate space of the element E. When CSS transforms are present, preserve axis-alignment by using the smallest axis-aligned rectangle that contains the transformed box.

	~~Exactly~~ which snapping opportunity (if any) is ~~taken is~~ UA-dependent~~, but subject to~~ the following constraints:		The algorithm for computing which snapping opportunity (if any) to take is gesture and UA dependent. However the following constraints should be honored:
	* If 'scroll-snap-type-x' is '~~none~~', ~~no snapping occurs in the horizontal direction.~~		* When scrolling along an axis for which 'scroll-snap-type' is 'mandatory', the UA should settle on a scroll position which matches one of the snapping opportunities for that axis. However this requirement is lifted if one or more of the snapping opportunities' boxes B is larger than the scroll-port.
	* If there are no snapping opportunities, no snapping occurs in the horizontal direction.		* When 'scroll-snap-type' is 'none' for some axis, no scroll snapping occurs along that axis.
	* If the gesture's horizontal direction is not "unspecified" and there are no snapping opportunities in the direction of the gesture, searching from the scroll position ~~at the start~~ of the ~~gesture, no~~ snapping ~~occurs in the horizontal direction~~. ~~(I.e. scroll snapping can't scroll in~~ the ~~opposite direction when a gesture has a definite direction.)~~
	* If the gesture's horizontal direction is "left", snapping opportunities ~~that align the right edges of fragment~~ boxes ~~are ignored.~~
	* If the gesture's horizontal direction is ~~"right", snapping opportunities that align~~ the ~~left edges of fragment boxes are ignored~~.
	* If 'scroll-snap-type-x' is '~~mandatory~~', ~~and none of the above constraints apply,~~ snapping ~~must occur in the horizontal direction.~~
	~~Similar constraints apply in the vertical direction. When a snapping opportunity is taken, the UA applies additional scrolling to achieve the alignment specified by the snapping opportunity~~.

	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. Layout changes that affect the positions of elements with 'scroll-snap-edges', or dynamic changes to values of 'scroll-snap-edges', do not trigger snapping in the absence of a scroll gesture, even if 'mandatory' snapping is requested.		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. Layout changes that affect the positions of elements with 'scroll-snap-edges', or dynamic changes to values of 'scroll-snap-edges', do not trigger snapping in the absence of a scroll gesture, even if 'mandatory' snapping is requested.

	''It would be nice to have 'scroll-snap-type:mandatory' ensure that at all times we're scrolled to the snap-edge of some element, even after arbitrary content and style changes. However, it's not clear how that should behave in many cases. For example, without a scroll gesture direction, it's not clear whether you should snap the top of an element to the top of the container or the bottom of an element to the bottom of the container.''

Roc: /* Proposal */

2014-02-28T03:41:05Z

Proposal

← Older revision		Revision as of 03:41, 28 February 2014
Line 11:		Line 11:
	A scrollable element is one for which 'overflow-x' or 'overflow-y' is 'scroll' or 'auto'.		A scrollable element is one for which 'overflow-x' or 'overflow-y' is 'scroll' or 'auto'.

	<tt>scroll-snap-edges: none \| margin-box \| border-box</tt>		<tt>scroll-snap-edges: none \| margin-box \| border-box \| center</tt>

	This property defines which (if any) CSS boxes for the element contribute to the allowable snapping positions for the nearest scrollable ancestor. Which edge of the box is used depends on the direction of the scroll operation. For example, when scrolling down, the bottom edge of the box ~~is aligned~~ with the bottom edge of the scrolling container. More details below.		This property defines which (if any) CSS boxes for the element contribute to the allowable snapping positions for the nearest scrollable ancestor. Which edge of the box is used depends on the direction of the scroll operation. For example, when scrolling down, the bottom edge of the box should align with the bottom edge of the scrolling container. More details below.

	Scroll snapping is applied at the end of each complete scroll gesture (e.g. after releasing the finger at the end of a touch panning gesture, after pressing an arrow key) to potentially adjust the final scroll destination. The vocabulary of scroll gestures, and their scrolling behaviors (e.g. animation physics) depends on UA considerations and is not (and should not be) defined here. However, we require ~~that~~ each ~~scroll~~ gesture have ~~a logical~~ start scroll ~~offset and end scroll offset. (These need~~ not correspond to actual ~~rendered~~ scroll ~~offsets~~. ~~For example~~ if the user presses page-down to start ~~an animated scroll operation, and then presses~~ page-down ~~again before that operation is complete, the second~~ gesture~~'s start offset might~~ be the ~~desired~~ destination of the first gesture ~~rather than~~ the ~~actual scroll position at~~ that ~~time~~.) ~~Scroll snapping produces a snapped scroll offset to be used as the final scroll destination.~~		Scroll snapping is applied at the end of each complete scroll gesture (e.g. after releasing the finger at the end of a touch panning gesture, after pressing an arrow key) to potentially adjust the final scroll destination. The vocabulary of scroll gestures, and their scrolling behaviors (e.g. animation physics) depends on UA considerations and is not (and should not be) defined here. However, we require each gesture to have, for each axis, an optional direction; i.e. the horizontal direction can be "left", "right" or "unspecified", and the vertical direction can be "up", "down" or "unspecified". We also require each gesture to have an associated "start scroll position", which may or may not correspond to the actual scroll position at the start of the gesture. (E.g., if the user presses page-down twice quickly, the start position for the second page-down gesture may be the expected final destination of the first page-down gesture, even if the scrolling for that gesture hasn't completed yet.)

	~~Scroll snapping for~~ a ~~scrollable~~ element E ~~is defined independently for horizontal and vertical offsets. Horizontally~~, ~~if 'scroll-snap-x' is 'none' or the start and end offsets are equal, the snapped scroll offset is the end offset. Otherwise we collect~~ the set of ~~candidate boxes C as follows~~:		At the end of a gesture which scrolls an element E, the UA determines a set of potential snapping opportunities:
	* For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' is 'margin-box', D's first margin-box ~~if it has one~~.		* For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' is 'margin-box', let B be D's first fragment's margin-box. If B exists, then each edge of B can be snapped to the corresponding edge of E's scroll-port.
	* For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' is 'border-box', D's first border-box ~~if it has one~~.		* For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' is 'border-box', let B be D's first fragment's border-box. If B exists, then each edge of B can be snapped to the corresponding edge of E's scroll-port.
	If ~~the start offset is less than the end offset (scrolling to the right)~~, ~~take the right~~ edge of ~~each box in C. The~~ snapped scroll offset is the offset that aligns the right edge of the scrolling container with the right edge of a box in C, and requires the least rightward scrolling. C edges that require leftward or no scrolling are not considered.		* For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' is 'center', let B be D's first fragment's border-box. If B exists, then the center of B can be snapped to the center of E's scroll-port.
	~~If the start offset is greater than the end offset (scrolling~~ to the ~~left), take the left~~ edge of ~~each box in C. The snapped~~ scroll offset is the offset that aligns the left edge of the scrolling container with the left edge of a box in C, and requires the least leftward scrolling. C edges that require rightward or no scrolling are not considered.
	* ~~If 'scroll-snap-type-x'~~ is ~~'proximity'~~, ~~the UA can choose to scroll to the snapped offset or (e.g. if that~~'s ~~too far away from the end offset), it can scroll to the end offset instead. If no C edges can be considered, the snapped offset is the end offset.~~
	* If 'scroll-snap-~~type-x~~' is '~~mandatory~~', ~~the UA can choose to scroll to the snapped offset or (e.g. if that~~'s ~~too far away from the end offset), it can reject the scroll gesture entirely~~. If ~~no C edges can be considered~~, the ~~snapped offset is the furthest offset in the direction of scrolling.~~
	~~In any~~ of ~~these cases the UA~~ can ~~animate the scroll operation and adjust the actual scroll position~~ to the ~~destination over some period~~ of ~~time~~.

	~~Vertical offsets are handled analogously~~.		These definitions implicitly require transforming a box rectangle up to the coordinate space of the element E. These transformations must take into account CSS positioning but not CSS transforms (so the orientation of boxes is guaranteed to be preserved).

	~~The above algorithm implicitly requires transforming a box edge up~~ to the ~~coordinate space~~ of the ~~scrolling container~~. ~~These transformations must take into account CSS positioning but not CSS transforms~~ (so the ~~orientation~~ of boxes is ~~guaranteed~~ to ~~be preserved)~~.		Exactly which snapping opportunity (if any) is taken is UA-dependent, but subject to the following constraints:
			* If 'scroll-snap-type-x' is 'none', no snapping occurs in the horizontal direction.
			* If there are no snapping opportunities, no snapping occurs in the horizontal direction.
			* If the gesture's horizontal direction is not "unspecified" and there are no snapping opportunities in the direction of the gesture, searching from the scroll position at the start of the gesture, no snapping occurs in the horizontal direction. (I.e. scroll snapping can't scroll in the opposite direction when a gesture has a definite direction.)
			* If the gesture's horizontal direction is "left", snapping opportunities that align the right edges of fragment boxes are ignored.
			* If the gesture's horizontal direction is "right", snapping opportunities that align the left edges of fragment boxes are ignored.
			* If 'scroll-snap-type-x' is 'mandatory', and none of the above constraints apply, snapping must occur in the horizontal direction.
			Similar constraints apply in the vertical direction. When a snapping opportunity is taken, the UA applies additional scrolling to achieve the alignment specified by the snapping opportunity.

	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. Layout changes that affect the positions of elements with 'scroll-snap-edges', or dynamic changes to values of 'scroll-snap-edges', do not trigger snapping in the absence of a scroll gesture, even if 'mandatory' snapping is requested. However, UAs should ensure that with mandatory snapping, any sequence of scroll gestures followed by a steady state with no style or content changes results in the scroll position at the edge of some scroll-snap-edges element, or the end of the scroll container, depending on the direction of the last scroll gesture that was not rejected.		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. Layout changes that affect the positions of elements with 'scroll-snap-edges', or dynamic changes to values of 'scroll-snap-edges', do not trigger snapping in the absence of a scroll gesture, even if 'mandatory' snapping is requested.

	''It would be nice to have 'scroll-snap-type:mandatory' ensure that at all times we're scrolled to the snap-edge of some element, even after arbitrary content and style changes. However, it's not clear how that should behave in many cases. For example, without a scroll gesture direction, it's not clear whether you should snap the top of an element to the top of the container or the bottom of an element to the bottom of the container.''		''It would be nice to have 'scroll-snap-type:mandatory' ensure that at all times we're scrolled to the snap-edge of some element, even after arbitrary content and style changes. However, it's not clear how that should behave in many cases. For example, without a scroll gesture direction, it's not clear whether you should snap the top of an element to the top of the container or the bottom of an element to the bottom of the container.''

Roc: /* Proposal */

2013-12-13T10:44:56Z

Proposal

← Older revision		Revision as of 10:44, 13 December 2013
Line 1:		Line 1:
	== Proposal ==		== Proposal ==

	<tt>scroll-snap: none \| proximity \| mandatory</tt> (shorthand setting both x and y)		<tt>scroll-snap-type: none \| proximity \| mandatory</tt> (shorthand setting both x and y)

	<tt>scroll-snap-y: none \| proximity \| mandatory</tt>		<tt>scroll-snap-type-y: none \| proximity \| mandatory</tt>

	<tt>scroll-snap-x: none \| proximity \| mandatory</tt>		<tt>scroll-snap-type-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 11:		Line 11:
	A scrollable element is one for which 'overflow-x' or 'overflow-y' is 'scroll' or 'auto'.		A scrollable element is one for which 'overflow-x' or 'overflow-y' is 'scroll' or 'auto'.

	<tt>scroll-snap-~~edge~~: none \| [ margin-~~left~~ \|~~\| margin-start \|\| margin~~-~~top \|\| left \|\| start \|\| top ]~~</tt>		<tt>scroll-snap-edges: none \| margin-box \| border-box</tt>

	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) CSS boxes for the element contribute to the allowable snapping positions for the nearest scrollable ancestor. Which edge of the box is used depends on the direction of the scroll operation. For example, when scrolling down, the bottom edge of the box is aligned with the bottom edge of the scrolling container. More details below.

	~~For an element E with 'scroll-snap-x' not 'none', the set of ''horizontal~~ snapping ~~positions''~~ is the ~~union~~ of		Scroll snapping is applied at the end of each complete scroll gesture (e.g. after releasing the finger at the end of a touch panning gesture, after pressing an arrow key) to potentially adjust the final scroll destination. The vocabulary of scroll gestures, and their scrolling behaviors (e.g. animation physics) depends on UA considerations and is not (and should not be) defined here. However, we require that each scroll gesture have a logical start scroll offset and end scroll offset. (These need not correspond to actual rendered scroll offsets. For example if the user presses page-down to start an animated scroll operation, and then presses page-down again before that operation is complete, the second gesture's start offset might be the desired destination of the first gesture rather than the actual scroll position at that time.) Scroll snapping produces a snapped scroll offset to be used as the final scroll destination.
	* 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 ~~each descendant D of E for which E is~~ the ~~nearest scrollable ancestor, where D's value of 'scroll-snap-edge' contains 'margin~~-start', ~~the left edge of the first margin~~-~~box of D if there~~ is ~~one and E's direction is LTR~~, ~~or the right edge of~~ the ~~first margin-box of D if there is one and E~~'s ~~direction is RTL.~~
	* For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' contains 'start', the ~~left edge~~ of the first ~~border-box of D if there is one and E's direction is LTR, or~~ the ~~right edge of~~ the ~~first border-box of D if there is one and E's direction is RTL~~.

	~~For an~~ element E ~~with~~ 'scroll-snap-y' ~~not~~ 'none', the ~~set of ''vertical snapping positions''~~ is the ~~union~~ of		Scroll snapping for a scrollable element E is defined independently for horizontal and vertical offsets. Horizontally, if 'scroll-snap-x' is 'none' or the start and end offsets are equal, the snapped scroll offset is the end offset. Otherwise we collect the set of candidate boxes C as follows:
	* 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' is 'margin-box', D's first margin-box if it has 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' is 'border-box', D's first border-box if it has one.
			If the start offset is less than the end offset (scrolling to the right), take the right edge of each box in C. The snapped scroll offset is the offset that aligns the right edge of the scrolling container with the right edge of a box in C, and requires the least rightward scrolling. C edges that require leftward or no scrolling are not considered.
			If the start offset is greater than the end offset (scrolling to the left), take the left edge of each box in C. The snapped scroll offset is the offset that aligns the left edge of the scrolling container with the left edge of a box in C, and requires the least leftward scrolling. C edges that require rightward or no scrolling are not considered.
			* If 'scroll-snap-type-x' is 'proximity', the UA can choose to scroll to the snapped offset or (e.g. if that's too far away from the end offset), it can scroll to the end offset instead. If no C edges can be considered, the snapped offset is the end offset.
			* If 'scroll-snap-type-x' is 'mandatory', the UA can choose to scroll to the snapped offset or (e.g. if that's too far away from the end offset), it can reject the scroll gesture entirely. If no C edges can be considered, the snapped offset is the furthest offset in the direction of scrolling.
			In any of these cases the UA can animate the scroll operation and adjust the actual scroll position to the destination over some period of time.

	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).		Vertical offsets are handled analogously.

	~~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~~.		The above algorithm implicitly requires transforming a box edge up to the coordinate space of the scrolling container. These transformations must take into account CSS positioning but not CSS transforms (so the orientation of boxes is guaranteed to be preserved).

	~~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.		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. Layout changes that affect the positions of elements with 'scroll-snap-edges', or dynamic changes to values of 'scroll-snap-edges', do not trigger snapping in the absence of a scroll gesture, even if 'mandatory' snapping is requested. However, UAs should ensure that with mandatory snapping, any sequence of scroll gestures followed by a steady state with no style or content changes results in the scroll position at the edge of some scroll-snap-edges element, or the end of the scroll container, depending on the direction of the last scroll gesture that was not rejected.

	~~Similarly for~~ 'scroll-snap-x'.		''It would be nice to have 'scroll-snap-type:mandatory' ensure that at all times we're scrolled to the snap-edge of some element, even after arbitrary content and style changes. However, it's not clear how that should behave in many cases. For example, without a scroll gesture direction, it's not clear whether you should snap the top of an element to the top of the container or the bottom of an element to the bottom of the container.''

	~~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.

Roc: /* Proposal */

2013-12-04T09:29:36Z

Proposal

← Older revision		Revision as of 09:29, 4 December 2013
Line 18:		Line 18:
	* 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 '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 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 each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' contains 'margin-start', the left edge of the first margin-box of D if there is one and E's direction is LTR, or the right edge of the first margin-box of D if there is one and E's direction is RTL.
			* For each descendant D of E for which E is the nearest scrollable ancestor, where D's value of 'scroll-snap-edge' contains 'start', the left edge of the first border-box of D if there is one and E's direction is LTR, or the right edge of the first border-box of D if there is one and E's direction is RTL.

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

Roc: /* Proposal */

2013-12-04T09:26:37Z

Proposal

← Older revision		Revision as of 09:26, 4 December 2013
Line 1:		Line 1:
	== Proposal ==		== Proposal ==

	<tt>scroll-snap~~-vertical~~: none \| proximity \| mandatory</tt>		<tt>scroll-snap: none \| proximity \| mandatory</tt> (shorthand setting both x and y)

	<tt>scroll-snap-~~horizontal~~: none \| proximity \| mandatory</tt>		<tt>scroll-snap-y: none \| proximity \| mandatory</tt>

	<tt>scroll-snap: none \| proximity \| mandatory</tt> ~~(shorthand setting both vertical and horizontal)~~		<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-~~vertical~~' not 'none', the set of ''vertical snapping positions'' is the union of		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.

	~~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).		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-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-~~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.		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-~~horizontal~~'.		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.

Roc: /* Proposal */

2013-12-04T09:24:51Z

Proposal

← Older revision		Revision as of 09:24, 4 December 2013
Line 31:		Line 31:
	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.		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.

Roc: /* Issues */

2013-12-04T09:23:54Z

Issues

← Older revision		Revision as of 09:23, 4 December 2013
Line 34:		Line 34:

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

	~~== Issues ==~~

	* How to handle RTL

Roc: /* Proposal */

2013-12-04T09:23:39Z

Proposal

← Older revision		Revision as of 09:23, 4 December 2013
Line 11:		Line 11:
	A scrollable element is one for which 'overflow-x' or 'overflow-y' is 'scroll' or 'auto'.		A scrollable element is one for which 'overflow-x' or 'overflow-y' is 'scroll' or 'auto'.

	<tt>scroll-snap-edge: none \| [ margin-left \|\| margin-top \|\| left \|\| top ]</tt>		<tt>scroll-snap-edge: none \| [ margin-left \|\| margin-start \|\| margin-top \|\| left \|\| start \|\| top ]</tt>

	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.
Line 18:		Line 18:
	* 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.
	* Zero.

	For an element E with 'scroll-snap-~~vertical~~' not 'none', the set of ''horizontal snapping positions'' is the union of		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 '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 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).		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: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 snapping positions at the end of the scrolling gesture, if it's "sufficiently close" to a snapping position.		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'.		Similarly for 'scroll-snap-horizontal'.
Line 35:		Line 33:
	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.		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.		The details of snapping behavior (physics) are up to the UA.

	== Issues ==		== Issues ==

	* How to handle RTL		* How to handle RTL