@@ -15,7 +15,7 @@ Editor: Jacob Rossi, Microsoft
15
15
Editor : Tab Atkins-Bittner, Google, http://xanthir.com/contact/
16
16
Editor : Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact
17
17
Abstract : 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
19
19
At Risk : ''point'' value of 'scroll-snap-type'
20
20
At Risk : 'scroll-snap-stop'
21
21
</pre>
@@ -141,7 +141,7 @@ Motivating Examples {#examples}
141
141
overflow-y: auto;
142
142
/* Specifies that each element’s snap area should
143
143
align with a 100px offset from the top edge. */
144
- scroll-snap- padding: 100px 0 0;
144
+ scroll-padding: 100px 0 0;
145
145
/* Encourages scrolling to end at a snap position when the
146
146
operation completes, if it is near a snap position */
147
147
scroll-snap-type: proximity;
@@ -163,7 +163,7 @@ Motivating Examples {#examples}
163
163
<figcaption>
164
164
The layout of the scroll container’s contents in the example.
165
165
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),
167
167
and the snap area is represented by the yellow rectangle.
168
168
Since the scroll-snap-align is “start” in the Y axis,
169
169
a snap position is established at each scroll position
@@ -201,7 +201,7 @@ Overview {#overview}
201
201
of an element’s <a>scroll snap area</a>
202
202
(its border bounding box, as modified by 'scroll-snap-margin' )
203
203
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' ).
205
205
This is conceptually equivalent to specifying the alignment of
206
206
an <a>alignment subject</a> within an <a>alignment container</a> .
207
207
A scroll position that satisfies the specified alignment
@@ -351,11 +351,11 @@ Scroll Snap Strictness: the ''scroll-snap-type/none'', ''proximity'', and ''mand
351
351
352
352
If the content or layout of the document changes
353
353
(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,
355
355
the UA must re-evaluate the resulting <a>scroll position</a> ,
356
356
and re-snap if required.
357
357
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
359
359
(e.g. its associated element was not deleted),
360
360
the scroll container must be re-snapped to that same snap position
361
361
after the content change.
@@ -404,7 +404,7 @@ Scroll Snapport: the 'scroll-padding' property {#scroll-padding}
404
404
and reduce the amount of scrolling for paging operations
405
405
(such as using the <kbd> PgUp</kbd> and <kbd> PgDn</kbd> keys
406
406
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>
408
408
the user sees a continuous stream of content.
409
409
410
410
For a <a>scroll snap container</a> this region also defines
@@ -416,7 +416,7 @@ Scroll Snapport: the 'scroll-padding' property {#scroll-padding}
416
416
and specify inward offsets from each edge of the scrollport.
417
417
418
418
<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
420
420
within the portion of the scrollport
421
421
that is not obscured by a fixed-position toolbar.
422
422
@@ -425,7 +425,7 @@ Scroll Snapport: the 'scroll-padding' property {#scroll-padding}
425
425
overflow-x: auto;
426
426
overflow-y: hidden;
427
427
scroll-snap-type: mandatory;
428
- scroll-snap- padding: 0 500px 0 0;
428
+ scroll-padding: 0 500px 0 0;
429
429
}
430
430
.toolbar {
431
431
position: fixed;
@@ -440,7 +440,7 @@ Scroll Snapport: the 'scroll-padding' property {#scroll-padding}
440
440
</div>
441
441
442
442
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>
444
444
in one declaration.
445
445
446
446
Aligning Scroll Snap Areas: Properties on the elements {#properties-on-the-elements}
@@ -885,11 +885,11 @@ Choosing Snap Positions {#choosing}
885
885
Appendix A: Longhands {#longhands}
886
886
==================================
887
887
888
- Physical Longhands for 'scroll-snap- padding' {#padding-longhands-physical}
889
- --------------------------------------------------------------------------
888
+ Physical Longhands for 'scroll-padding' {#padding-longhands-physical}
889
+ ----------------------------------------------------------------------
890
890
891
891
<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
893
893
Value : <<length>> | <<percentage>>
894
894
Initial : 0
895
895
Applies to : <a>scroll containers</a>
@@ -900,15 +900,15 @@ Physical Longhands for 'scroll-snap-padding' {#padding-longhands-physical}
900
900
Animatable : as length, percentage, or calc
901
901
</pre>
902
902
903
- These <a>longhands</a> of 'scroll-snap- padding' specify
903
+ These <a>longhands</a> of 'scroll-padding' specify
904
904
the top, right, bottom, and left edges
905
905
of the <a>snapport</a> , respectively.
906
906
907
- Flow-relative Longhands for 'scroll-snap- padding' {#padding-longhands-logical}
908
- -------------------------------------------------------------------------------
907
+ Flow-relative Longhands for 'scroll-padding' {#padding-longhands-logical}
908
+ --------------------------------------------------------------------------
909
909
910
910
<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
912
912
Value : <<length>> | <<percentage>>
913
913
Initial : 0
914
914
Applies to : <a>scroll containers</a>
@@ -919,12 +919,12 @@ Flow-relative Longhands for 'scroll-snap-padding' {#padding-longhands-logical}
919
919
Animatable : as length, percentage, or calc
920
920
</pre>
921
921
922
- These <a>longhands</a> of 'scroll-snap- padding' specify
922
+ These <a>longhands</a> of 'scroll-padding' specify
923
923
the block-start, inline-start, block-end, and inline-end edges
924
924
of the <a>snapport</a> , respectively.
925
925
926
926
<pre class="propdef">
927
- Name : scroll-snap- padding-block, scroll-snap -padding-inline
927
+ Name : scroll-padding-block, scroll-padding-inline
928
928
Value : [ <<length>> | <<percentage>> ]{1,2}
929
929
Initial : 0
930
930
Applies to : all elements
@@ -935,9 +935,9 @@ Flow-relative Longhands for 'scroll-snap-padding' {#padding-longhands-logical}
935
935
Animatable : as length, percentage, or calc
936
936
</pre>
937
937
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' ,
941
941
and specify the block-axis and inline-axis edges of the <a>snapport</a> , respectively.
942
942
943
943
If two values are specified, the first gives the start value
@@ -1030,7 +1030,7 @@ Changes {#changes}
1030
1030
Changes since the <a href="https://www.w3.org/TR/2016/WD-css-scroll-snap-1-20160623/">23 June 2016 Working Draft</a> include:
1031
1031
1032
1032
<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.
1034
1034
<li> Removed renaming issues because nobody came up with a better alternative to ''scroll-snap-type: mandatory | proximity'' or ''scroll-snap-stop: normal'' .
1035
1035
<li> Miscellaneous clarifications.
1036
1036
</ul>
0 commit comments