Skip to content

Commit 6ac4727

Browse files
committed
[css-scroll-snap-1] Change the scroll categories to absolute/relative/stationary, per WG resolution. #12394
1 parent 744ea62 commit 6ac4727

File tree

1 file changed

+64
-24
lines changed

1 file changed

+64
-24
lines changed

css-scroll-snap-1/Overview.bs

Lines changed: 64 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -914,7 +914,7 @@ Scroll Snap Limits: the 'scroll-snap-stop' property {#scroll-snap-stop}
914914
Animation type: discrete
915915
</pre>
916916

917-
When scrolling with an intended direction,
917+
When performing a [=relative scroll=],
918918
the <a>scroll container</a> can “pass over” several possible <a>snap positions</a>
919919
(that would be valid to snap to,
920920
if the scrolling operation used the same direction
@@ -941,7 +941,7 @@ Scroll Snap Limits: the 'scroll-snap-stop' property {#scroll-snap-stop}
941941
it must instead snap to the first of this element's <a>snap positions</a>.
942942
</dl>
943943

944-
This property has no effect on scrolling operations with only an <a>intended end position</a>,
944+
This property has no effect on non-[=relative scrolling=] operations,
945945
as they do not conceptually “pass over” any <a>snap positions</a>.
946946

947947
Snapping Mechanics {#snap-concepts}
@@ -976,18 +976,22 @@ Snapping Mechanics {#snap-concepts}
976976
Types of Scrolling Methods {#scroll-types}
977977
------------------------------------------
978978

979-
When a page is scrolled,
980-
the action is performed with
981-
an intended end position
982-
and/or an intended direction.
983-
Each combination of these two things
984-
defines a distinct category of scrolling,
985-
which can be treated slightly differently:
979+
There are many ways to cause a page to scroll,
980+
and they differ in their intent,
981+
which affects how scroll snapping and other features
982+
should <em>respond</em> to them.
983+
The types of scrolling intents are:
986984

987-
: <dfn export>intended end position</dfn>
985+
: <dfn export>absolute scroll</dfn>
988986
::
987+
An [=absolute scroll=] is a scrolling operation
988+
that is not intended to have any relation with the previous scroll position.
989+
Whether the new position is before or after the previous scroll position
990+
is not relevant to the operation;
991+
the scroll container just "goes straight there".
992+
989993
<div class="example">
990-
Common examples of scrolls with only an <a>intended end position</a> include:
994+
Common examples of [=absolute scrolls=] include:
991995

992996
* a panning gesture,
993997
released without momentum
@@ -998,28 +1002,64 @@ Types of Scrolling Methods {#scroll-types}
9981002
* homing operations such as the <kbd>Home</kbd>/<kbd>End</kbd> keys
9991003
</div>
10001004

1001-
: <dfn export>intended direction and end position</dfn>
1005+
Note: Scroll snapping responds to an [=absolute scroll=]
1006+
by finding the nearest valid [=snap position=],
1007+
<em>regardless</em> of direction.
1008+
1009+
: <dfn export>relative scroll</dfn>
10021010
::
1011+
A [=relative scroll=] is a scrolling operation
1012+
that does have a meaningful relation with the previous scroll position;
1013+
that is, the fact that the new scroll position is before or after the old scroll position
1014+
is an important quality of the scroll.
1015+
1016+
Relative scrolls might or might not have an intended end position,
1017+
but they always have an intended <em>direction</em>.
1018+
10031019
<div class="example">
1004-
Common examples of scrolls with both an <a>intended direction and end position</a> include:
1020+
Common examples of [=relative scrolls=] with both an intended direction and end position include:
10051021

1006-
* a “fling” gesture,
1007-
interpreted with momentum
1022+
* a “fling” gesture, interpreted with momentum
10081023
* programmatically scrolling via APIs such as {{Window/scrollBy()}}
10091024
* paging operations such as the <kbd>PgUp</kbd>/<kbd>PgDn</kbd> keys (or equivalent operations on the scrollbar)
1025+
1026+
Common examples of [=relative scrolls=] with only an intended direction include:
1027+
1028+
* pressing an arrow key on the keyboard
1029+
* pressing an arrow button on the scrollbar
1030+
* a swiping gesture interpreted as a fixed (rather than inertial) scroll
10101031
</div>
10111032

10121033
The intended end point of the scroll prior to intervention from features such
10131034
as snap points is its <dfn noexport>natural end-point</dfn>.
10141035

1015-
: <dfn export>intended direction</dfn>
1036+
Note: Scroll snapping responds to a [=relative scroll=]
1037+
by finding the nearest valid [=snap position=]
1038+
<em>in the intended direction</em> (if possible),
1039+
so a snapped element can't get "trapped"
1040+
when the [=snap positions=] are far apart.
1041+
1042+
: <dfn export>stationary scroll</dfn>
10161043
::
1044+
A [=stationary scroll=] is a scrolling operation
1045+
that isn't "intending" to move the scroller at all;
1046+
instead, it's attempting to keep something stationary
1047+
(usually, an element you're focusing on).
1048+
10171049
<div class="example">
1018-
Common examples of scrolls with only an <a>intended direction</a> include:
1050+
Common examples of [=stationary scrolls=] include:
10191051

1020-
* pressing an arrow key on the keyboard (or equivalent operations on the scrollbar)
1021-
* a swiping gesture interpreted as a fixed (rather than inertial) scroll
1022-
</div>
1052+
* scroll anchoring with 'overflow-anchor',
1053+
when off-screen content changes size
1054+
and would move the current anchor
1055+
* scroll snapping (especially ''scroll-snap-type/mandatory'')
1056+
when another element changes size
1057+
and causes the scroller to no longer be at a valid snap point
1058+
</div>
1059+
1060+
Note: Scroll snapping responds to a [=stationary scroll=]
1061+
by finding the nearest valid [=snap position=],
1062+
similar to an [=absolute scroll=].
10231063

10241064
Additionally, because page layouts usually align things vertically and/or horizontally,
10251065
UAs sometimes <dfn export>axis-lock</dfn> a scroll when its direction
@@ -1065,8 +1105,8 @@ Choosing Snap Positions {#choosing}
10651105
on the scroll position,
10661106
<a>snap positions</a> should be ignored if their elements are far outside of the “corridor”
10671107
that the <a>snapport</a> defines as it moves through the <a>scrollable overflow area</a>,
1068-
or a hypothetical “corridor” in the direction of a scroll with only an <a>intended direction</a>,
1069-
or the <a>snapport</a> after an scroll with only an <a>intended end position</a>.
1108+
or a hypothetical “corridor” in the direction of a [=relative scroll=],
1109+
or the <a>snapport</a> after an [=absolute scroll=].
10701110

10711111
* User agents <em>must</em> ensure that a user can “escape” a <a>snap position</a>,
10721112
regardless of the scroll method.
@@ -1079,7 +1119,7 @@ Choosing Snap Positions {#choosing}
10791119
and otherwise ignored the starting snap position,
10801120
would give better behavior.
10811121

1082-
(This implies that a scroll with only an <a>intended direction</a>
1122+
(This implies that a [=relative scroll=] without an intended end position
10831123
must always ignore the starting <a>snap positions</a>.)
10841124

10851125
* If a page is navigated to a fragment that defines a target element
@@ -1092,7 +1132,7 @@ Choosing Snap Positions {#choosing}
10921132

10931133
* If a scroll by page operation (e.g. Page down / Page up) is being performed,
10941134
eligible <a>snap positions</a> that require scrolling less than or equal to the size of the <a>optimal viewing region</a> of the <a>scroll container</a>
1095-
should be selected before any farther away, ignoring the starting <a>snap positions</a> so that progress is still made in the <a>intended direction</a>.
1135+
should be selected before any farther away, ignoring the starting <a>snap positions</a> so that progress is still made in the intended direction.
10961136

10971137
<h4 id="multiple-aligned-snap-areas">Selecting between multiple aligned snap areas</h4>
10981138

0 commit comments

Comments
 (0)