Skip to content

Commit fb52823

Browse files
committed
[css-scroll-snap-1] Emphasize that scroll-padding and scroll-margin apply even when snapping is off. w3c#3721
1 parent b902706 commit fb52823

File tree

1 file changed

+62
-9
lines changed

1 file changed

+62
-9
lines changed

css-scroll-snap-1/Overview.bs

+62-9
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ Shortname: css-scroll-snap
55
TR: https://www.w3.org/TR/css-scroll-snap-1/
66
Level: 1
77
Status: ED
8+
Previous Version: https://www.w3.org/TR/2019/CR-css-scroll-snap-1-20190131/
89
Previous Version: https://www.w3.org/TR/2018/CR-css-scroll-snap-1-20180814/
910
Previous Version: https://www.w3.org/TR/2017/CR-css-scroll-snap-1-20171214/
1011
Previous Version: https://www.w3.org/TR/2017/CR-css-scroll-snap-1-20170824/
@@ -53,12 +54,22 @@ Introduction {#intro}
5354
it is difficult for web developers to guarantee a well-controlled scrolling experience,
5455
in particular creating the effect of paging through content.
5556
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.
5758

58-
To this end, we introduce scroll snap positions
59+
To this end, this module introduces <a>scroll snap positions</a>
5960
which enforce the scroll positions that a <a>scroll container’s</a> scrollport may end at
6061
after a scrolling operation has completed.
6162

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+
6273
Module interactions {#placement}
6374
--------------------------------
6475

@@ -200,10 +211,11 @@ Motivating Examples {#examples}
200211
███████ ███ ████████ ██ ██ ███ ████ ████████ ███ ███
201212
-->
202213

203-
Overview {#overview}
204-
====================
214+
Scroll Snap Model {#overview}
215+
=============================
205216

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>,
207219
which are scroll positions that produce particular alignments
208220
of content within a scroll container.
209221
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}
413425
Animation type: by computed value type
414426
</pre>
415427

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:
418432
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>
420434
that are obscured by other content
421435
(such as fixed-positioned toolbars or sidebars)
422436
or simply to put more breathing room
@@ -542,7 +556,9 @@ Scroll Snapping Area: the 'scroll-margin' property {#scroll-margin}
542556
the UA should use the element's <a>scroll snap area</a>,
543557
rather than just its border box,
544558
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>.
546562

547563
<!--
548564
███ ██ ████ ██████ ██ ██
@@ -1117,6 +1133,43 @@ Changes Since 14 August 2018 CR {#changes-20180814}
11171133

11181134
Changes since the <a href="https://www.w3.org/TR/2018/CR-css-scroll-snap-1-20180814/">14 August 2018 Candidate Recommendation</a> include:
11191135

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&hellip;</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+
11201173
<ul>
11211174
<li id="change-2018-padding-intial">
11221175
Corrected 'scroll-padding' longhands to list the new ''scroll-padding/auto'' keyword in their property definition tables.

0 commit comments

Comments
 (0)