@@ -5,6 +5,7 @@ Shortname: css-scroll-snap
5
5
TR : https://www.w3.org/TR/css-scroll-snap-1/
6
6
Level : 1
7
7
Status : ED
8
+ Previous Version : https://www.w3.org/TR/2019/CR-css-scroll-snap-1-20190131/
8
9
Previous Version : https://www.w3.org/TR/2018/CR-css-scroll-snap-1-20180814/
9
10
Previous Version : https://www.w3.org/TR/2017/CR-css-scroll-snap-1-20171214/
10
11
Previous Version : https://www.w3.org/TR/2017/CR-css-scroll-snap-1-20170824/
@@ -53,12 +54,22 @@ Introduction {#intro}
53
54
it is difficult for web developers to guarantee a well-controlled scrolling experience,
54
55
in particular creating the effect of paging through content.
55
56
For instance, it is easy for a user to land at an awkward scroll position
56
- which leaves a page partially on-screen when panning.
57
+ which leaves an item partially on-screen when panning.
57
58
58
- To this end, we introduce scroll snap positions
59
+ To this end, this module introduces <a> scroll snap positions</a>
59
60
which enforce the scroll positions that a <a>scroll container’s</a> scrollport may end at
60
61
after a scrolling operation has completed.
61
62
63
+ Also, to offer better control over paging and scroll positioning
64
+ even when snapping is off,
65
+ this module defines the 'scroll-padding' property
66
+ for use on all <a>scroll containers</a> ,
67
+ to adjust the <a>scroll container</a> ’s <a>optimal viewing region</a>
68
+ for the purpose of paging and scroll-into-view operations.
69
+ Similarly the 'scroll-margin' property can be used on any box
70
+ to adjust its visual area
71
+ for the purpose of scroll-into-view operations.
72
+
62
73
Module interactions {#placement}
63
74
--------------------------------
64
75
@@ -200,10 +211,11 @@ Motivating Examples {#examples}
200
211
███████ ███ ████████ ██ ██ ███ ████ ████████ ███ ███
201
212
-->
202
213
203
- Overview {#overview}
204
- ====================
214
+ Scroll Snap Model {#overview}
215
+ =============================
205
216
206
- This module introduces control over <dfn lt="scroll snap position" local-lt="snap position">scroll snap positions</dfn> ,
217
+ This module defines controls fo
218
+ <dfn lt="scroll snap position" local-lt="snap position">scroll snap positions</dfn> ,
207
219
which are scroll positions that produce particular alignments
208
220
of content within a scroll container.
209
221
Using the 'scroll-snap-type' property on the relevant <a>scroll container</a> ,
@@ -413,10 +425,12 @@ Scroll Snapport: the 'scroll-padding' property {#scroll-padding}
413
425
Animation type : by computed value type
414
426
</pre>
415
427
416
- This property specifies offsets that define the
417
- <dfn export>optimal viewing region</dfn> of the scrollport:
428
+ This property specifies
429
+ (for all <a>scroll containers</a> , not just <a>scroll snap containers</a> )
430
+ offsets that define the
431
+ <dfn export>optimal viewing region</dfn> of a scrollport:
418
432
the region used as the target region for placing things in view of the user.
419
- This allows the author to exclude regions of the scrollport
433
+ This allows the author to exclude regions of the <a> scrollport</a>
420
434
that are obscured by other content
421
435
(such as fixed-positioned toolbars or sidebars)
422
436
or simply to put more breathing room
@@ -542,7 +556,9 @@ Scroll Snapping Area: the 'scroll-margin' property {#scroll-margin}
542
556
the UA should use the element's <a>scroll snap area</a> ,
543
557
rather than just its border box,
544
558
to determine which area of the <a>scrollable overflow region</a>
545
- to bring into view.
559
+ to bring into view,
560
+ <em> even when snapping is off
561
+ or not applied on this element</em> .
546
562
547
563
<!--
548
564
███ ██ ████ ██████ ██ ██
@@ -1117,6 +1133,43 @@ Changes Since 14 August 2018 CR {#changes-20180814}
1117
1133
1118
1134
Changes since the <a href="https://www.w3.org/TR/2018/CR-css-scroll-snap-1-20180814/">14 August 2018 Candidate Recommendation</a> include:
1119
1135
1136
+ <ul>
1137
+ <li id="change-2019-clarify-nonsnapping">
1138
+ Emphasized that 'scroll-padding' and 'scroll-margin' do apply
1139
+ even when scroll snapping is off.
1140
+ (<a href="https://github.com/w3c/csswg-drafts/issues/3721">Issue 3721</a> )
1141
+ <blockquote>
1142
+ <ins><p> Also, to offer better control over paging and scroll positioning
1143
+ even when snapping is off,
1144
+ this module defines the 'scroll-padding' property
1145
+ for use on all <a>scroll containers</a> ,
1146
+ to adjust the <a>scroll container</a> ’s <a>optimal viewing region</a>
1147
+ for the purpose of paging and scroll-into-view operations;
1148
+ similarly the 'scroll-margin' property can be used on any box
1149
+ to adjust its visual area
1150
+ for the purpose of scroll-into-view operations.</p></ins>
1151
+ </blockquote>
1152
+ <blockquote>
1153
+ <p> This property specifies
1154
+ <ins> (for all <a>scroll containers</a> , not just <a>scroll snap containers</a> )</ins>
1155
+ offsets that define the
1156
+ <a>optimal viewing region</a> of a scrollport…</p>
1157
+ </blockquote>
1158
+ <blockquote>
1159
+ <p> If a page is navigated to a fragment that defines a target element
1160
+ (one that would be matched by '':target'' ,
1161
+ or the target of {{scrollIntoView()}} ),
1162
+ the UA should use the element's <a>scroll snap area</a> ,
1163
+ rather than just its border box,
1164
+ to determine which area of the <a>scrollable overflow region</a>
1165
+ to bring into view<ins> ,
1166
+ <em> even when snapping is off
1167
+ or not applied on this element</em></ins> .</p>
1168
+ </blockquote>
1169
+ </ul>
1170
+
1171
+ Changes since the <a href="https://www.w3.org/TR/2018/CR-css-scroll-snap-1-20180814/">14 August 2018 Candidate Recommendation</a> include:
1172
+
1120
1173
<ul>
1121
1174
<li id="change-2018-padding-intial">
1122
1175
Corrected 'scroll-padding' longhands to list the new ''scroll-padding/auto'' keyword in their property definition tables.
0 commit comments