@@ -15,7 +15,7 @@ Editor: Jacob Rossi, Microsoft
1515Editor : Tab Atkins-Bittner, Google, http://xanthir.com/contact/
1616Editor : Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact
1717Abstract : This module contains features to control panning and scrolling behavior with “snap positions”.
18- Ignored Terms : containing block chain
18+ Ignored Terms : containing block chain, scroll position, scrollport
1919At Risk : ''point'' value of 'scroll-snap-type'
2020At Risk : 'scroll-snap-stop'
2121</pre>
@@ -141,7 +141,7 @@ Motivating Examples {#examples}
141141 overflow-y: auto;
142142 /* Specifies that each element’s snap area should
143143 align with a 100px offset from the top edge. */
144- scroll-snap- padding: 100px 0 0;
144+ scroll-padding: 100px 0 0;
145145 /* Encourages scrolling to end at a snap position when the
146146 operation completes, if it is near a snap position */
147147 scroll-snap-type: proximity;
@@ -163,7 +163,7 @@ Motivating Examples {#examples}
163163 <figcaption>
164164 The layout of the scroll container’s contents in the example.
165165 The snapport is represented by the red rectangle
166- (inset from the top by 100px due to the scroll-snap- padding),
166+ (inset from the top by 100px due to the scroll-padding),
167167 and the snap area is represented by the yellow rectangle.
168168 Since the scroll-snap-align is “start” in the Y axis,
169169 a snap position is established at each scroll position
@@ -201,7 +201,7 @@ Overview {#overview}
201201 of an element’s <a>scroll snap area</a>
202202 (its border bounding box, as modified by 'scroll-snap-margin' )
203203 within the <a>scroll container</a> ’s <a>snapport</a>
204- (its scrollport, as reduced by 'scroll-snap- padding' ).
204+ (its scrollport, as reduced by 'scroll-padding' ).
205205 This is conceptually equivalent to specifying the alignment of
206206 an <a>alignment subject</a> within an <a>alignment container</a> .
207207 A scroll position that satisfies the specified alignment
@@ -351,11 +351,11 @@ Scroll Snap Strictness: the ''scroll-snap-type/none'', ''proximity'', and ''mand
351351
352352 If the content or layout of the document changes
353353 (e.g. content is added, moved, deleted, resized)
354- such that the content of the <a>snapport</a> changes,
354+ such that the content of a <a>snapport</a> changes,
355355 the UA must re-evaluate the resulting <a>scroll position</a> ,
356356 and re-snap if required.
357357 If the <a>scroll container</a> was <a>snapped</a> before the content change
358- and that same snap position still exists
358+ and that same <a> snap position</a> still exists
359359 (e.g. its associated element was not deleted),
360360 the scroll container must be re-snapped to that same snap position
361361 after the content change.
@@ -404,7 +404,7 @@ Scroll Snapport: the 'scroll-padding' property {#scroll-padding}
404404 and reduce the amount of scrolling for paging operations
405405 (such as using the <kbd> PgUp</kbd> and <kbd> PgDn</kbd> keys
406406 or triggering equivalent operations from the scrollbar)
407- so that within the <a>optimal viewing region</a> of the <a>scrollport</a.
407+ so that within the <a>optimal viewing region</a> of the <a>scrollport</a>
408408 the user sees a continuous stream of content.
409409
410410 For a <a>scroll snap container</a> this region also defines
@@ -416,7 +416,7 @@ Scroll Snapport: the 'scroll-padding' property {#scroll-padding}
416416 and specify inward offsets from each edge of the scrollport.
417417
418418 <div class="example">
419- In this example, scroll-snap- padding is used to center slideshow images
419+ In this example, ' scroll-padding' is used to center slideshow images
420420 within the portion of the scrollport
421421 that is not obscured by a fixed-position toolbar.
422422
@@ -425,7 +425,7 @@ Scroll Snapport: the 'scroll-padding' property {#scroll-padding}
425425 overflow-x: auto;
426426 overflow-y: hidden;
427427 scroll-snap-type: mandatory;
428- scroll-snap- padding: 0 500px 0 0;
428+ scroll-padding: 0 500px 0 0;
429429 }
430430 .toolbar {
431431 position: fixed;
@@ -440,7 +440,7 @@ Scroll Snapport: the 'scroll-padding' property {#scroll-padding}
440440 </div>
441441
442442 This property is a <a>shorthand property</a> that sets
443- all of the <a href="#longhands"><css>scroll-snap- padding-*</css> longhands</a>
443+ all of the <a href="#longhands"><css>scroll-padding-*</css> longhands</a>
444444 in one declaration.
445445
446446Aligning Scroll Snap Areas: Properties on the elements {#properties-on-the-elements}
@@ -885,11 +885,11 @@ Choosing Snap Positions {#choosing}
885885Appendix A: Longhands {#longhands}
886886==================================
887887
888- Physical Longhands for 'scroll-snap- padding' {#padding-longhands-physical}
889- --------------------------------------------------------------------------
888+ Physical Longhands for 'scroll-padding' {#padding-longhands-physical}
889+ ----------------------------------------------------------------------
890890
891891 <pre class="propdef">
892- Name : scroll-snap- padding-top, scroll-snap- padding-right, scroll-snap- padding-bottom, scroll-snap -padding-left
892+ Name : scroll-padding-top, scroll-padding-right, scroll-padding-bottom, scroll-padding-left
893893 Value : <<length>> | <<percentage>>
894894 Initial : 0
895895 Applies to : <a>scroll containers</a>
@@ -900,15 +900,15 @@ Physical Longhands for 'scroll-snap-padding' {#padding-longhands-physical}
900900 Animatable : as length, percentage, or calc
901901 </pre>
902902
903- These <a>longhands</a> of 'scroll-snap- padding' specify
903+ These <a>longhands</a> of 'scroll-padding' specify
904904 the top, right, bottom, and left edges
905905 of the <a>snapport</a> , respectively.
906906
907- Flow-relative Longhands for 'scroll-snap- padding' {#padding-longhands-logical}
908- -------------------------------------------------------------------------------
907+ Flow-relative Longhands for 'scroll-padding' {#padding-longhands-logical}
908+ --------------------------------------------------------------------------
909909
910910 <pre class="propdef">
911- Name : scroll-snap- padding-inline-start, scroll-snap- padding-block-start, scroll-snap- padding-inline-end, scroll-snap -padding-block-end
911+ Name : scroll-padding-inline-start, scroll-padding-block-start, scroll-padding-inline-end, scroll-padding-block-end
912912 Value : <<length>> | <<percentage>>
913913 Initial : 0
914914 Applies to : <a>scroll containers</a>
@@ -919,12 +919,12 @@ Flow-relative Longhands for 'scroll-snap-padding' {#padding-longhands-logical}
919919 Animatable : as length, percentage, or calc
920920 </pre>
921921
922- These <a>longhands</a> of 'scroll-snap- padding' specify
922+ These <a>longhands</a> of 'scroll-padding' specify
923923 the block-start, inline-start, block-end, and inline-end edges
924924 of the <a>snapport</a> , respectively.
925925
926926 <pre class="propdef">
927- Name : scroll-snap- padding-block, scroll-snap -padding-inline
927+ Name : scroll-padding-block, scroll-padding-inline
928928 Value : [ <<length>> | <<percentage>> ]{1,2}
929929 Initial : 0
930930 Applies to : all elements
@@ -935,9 +935,9 @@ Flow-relative Longhands for 'scroll-snap-padding' {#padding-longhands-logical}
935935 Animatable : as length, percentage, or calc
936936 </pre>
937937
938- These <a>shorthands</a> of 'scroll-snap- padding-block-start' + 'scroll-snap -padding-block-end'
939- and 'scroll-snap- padding-inline-start' + 'scroll-snap -padding-inline-end'
940- are <a>longhands</a> of 'scroll-snap- padding' ,
938+ These <a>shorthands</a> of 'scroll-padding-block-start' + 'scroll-padding-block-end'
939+ and 'scroll-padding-inline-start' + 'scroll-padding-inline-end'
940+ are <a>longhands</a> of 'scroll-padding' ,
941941 and specify the block-axis and inline-axis edges of the <a>snapport</a> , respectively.
942942
943943 If two values are specified, the first gives the start value
@@ -1030,7 +1030,7 @@ Changes {#changes}
10301030 Changes since the <a href="https://www.w3.org/TR/2016/WD-css-scroll-snap-1-20160623/">23 June 2016 Working Draft</a> include:
10311031
10321032 <ul>
1033- <li> Renamed 'scroll-snap- padding' to 'scroll-padding' and extended its uses.
1033+ <li> Renamed 'scroll-padding' to 'scroll-padding' and extended its uses.
10341034 <li> Removed renaming issues because nobody came up with a better alternative to ''scroll-snap-type: mandatory | proximity'' or ''scroll-snap-stop: normal'' .
10351035 <li> Miscellaneous clarifications.
10361036 </ul>
0 commit comments