Skip to content

Commit 5c2487c

Browse files
argyleinkargyleink
committed
more foundational spec porting, macro outlined
1 parent 14befa9 commit 5c2487c

File tree

1 file changed

+191
-0
lines changed

1 file changed

+191
-0
lines changed

‎css-scroll-snap-2/Overview.bs

+191
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
<pre class='metadata'>
2+
Title: CSS Scroll Snap Module Level 2
3+
Group: csswg
4+
Shortname: css-scroll-snap
5+
Level: 2
6+
Status: ED
7+
Implementation Report: https://wpt.fyi/results/css/css-scroll-snap
8+
Work Status: Testing
9+
ED: https://drafts.csswg.org/css-scroll-snap-2/
10+
Editor: Matt Rakow, Microsoft, w3cid 62267
11+
Editor: Jacob Rossi, Microsoft, w3cid 45616
12+
Editor: Tab Atkins-Bittner, Google, http://xanthir.com/contact/, w3cid 42199
13+
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
14+
Editor: Adam Argyle, Google, https://nerdy.dev, w3cid 112669
15+
Abstract: This module contains features to control panning and scrolling behavior with “snap positions”.
16+
Status Text:
17+
A test suite and an implementation report will be produced during the
18+
CR period.
19+
</pre>
20+
21+
Introduction {#intro}
22+
=====================
23+
24+
<em>This section is not normative.</em>
25+
26+
<em>This is currently a draft spec over Scroll Snap 1.</em>
27+
28+
Scroll experiences don't always start at the beginning. Interactions with
29+
carousels, swipe controls, and listviews often start somewhere in the middle,
30+
and each require Javascript to set this position on page load.
31+
By enabling CSS to specify this scroll start x or y position,
32+
both users, page authors and browsers benefit.
33+
34+
In addition to setting an initial scroll position,
35+
developers need insights and events into Scroll Snap
36+
like which element is snapped on an axis,
37+
when the snap event is changing and/or indeterminate,
38+
events for snap completion, and conveniences for
39+
snapping to children programatically.
40+
41+
42+
Setting Where Scroll Starts {#properties-on-the-scroll-container}
43+
======================================================================================================
44+
45+
<!-- BIG TEXT: SCROLL START -->
46+
47+
The 'scroll-start' property {#scroll-start}
48+
--------------------------------------------------------------------------
49+
50+
<pre class="propdef">
51+
Name: scroll-start
52+
Value: auto | [end | center] | <<length-percentage>>
53+
Initial: none
54+
Applies to: all elements
55+
Inherited: no
56+
Percentages: n/a
57+
Computed value: specified keyword(s)
58+
Animation type: discrete
59+
</pre>
60+
61+
This property is a shorthand property that sets all of the scroll-start-* longhands in one declaration. It does not work like 'margin', where a value is repeated to all sides. {{scroll-start: 200px}} is not {{scroll-start: 200px 200px}}, it's {{scroll-start: 200px 0}}. Inline is first, followed by block.
62+
63+
Values are defined as follows:
64+
65+
<dl dfn-type=value dfn-for="scroll-snap-type">
66+
<dt><dfn>end</dfn>
67+
<dd>
68+
Scroll position starts at the end of a <a>scroll container</a>.
69+
Property value is at risk, may be duplicative.
70+
71+
<dt><dfn>center</dfn>
72+
<dd>
73+
Scroll position starts at the middle of a <a>scroll container</a>.
74+
Property value is at risk, may be duplicative.
75+
</dl>
76+
77+
Styling Snapped Items {#todo}
78+
======================================================================================================
79+
80+
The Snapped-element Pseudo-class: ':snapped' {#snapped}
81+
--------------------------------------------------------------------------
82+
83+
The {{:snapped}} pseudo-class matches any scroll snap
84+
targets, regardless of axis. The longform physical and logical pseudo-class
85+
selectors allow for more finite snapped children styling
86+
as they can target an individual axis.
87+
88+
More specific options are defined as follows:
89+
90+
<dl dfn-type=value dfn-for="scroll-snap-type">
91+
<dt><dfn>:snapped-x</dfn>
92+
<dd>
93+
Matches the child snapped on the {{x}} axis.
94+
95+
<dt><dfn>:snapped-y</dfn>
96+
<dd>
97+
Matches the child snapped on the {{y}} axis.
98+
99+
<dt><dfn>:snapped-inline</dfn>
100+
<dd>
101+
Matches the child snapped on the {{inline}} axis.
102+
103+
<dt><dfn>:snapped-block</dfn>
104+
<dd>
105+
Matches the child snapped on the {{block}} axis.
106+
</dl>
107+
108+
Snap Events {#todo}
109+
======================================================================================================
110+
111+
<!--
112+
████████ ██ ██ ████████ ██ ██ ████████ ██████
113+
██ ██ ██ ██ ███ ██ ██ ██ ██
114+
██ ██ ██ ██ ████ ██ ██ ██
115+
██████ ██ ██ ██████ ██ ██ ██ ██ ██████
116+
██ ██ ██ ██ ██ ████ ██ ██
117+
██ ██ ██ ██ ██ ███ ██ ██ ██
118+
████████ ███ ████████ ██ ██ ██ ██████
119+
-->
120+
121+
'snapChanged' and 'snapChanging'
122+
--------------------------------------------------------------------------
123+
124+
CSS scroll snap points are often used as a mechanism to
125+
create scroll interactive "selection" components,
126+
where selection is determined with javascript intersection observers
127+
and a scroll end guestimate. By creating a built-in event,
128+
the invisible state will become actionable,
129+
at the right time, and always correct.
130+
131+
<table class="data" id="eventhandlers">
132+
<thead>
133+
<tr>
134+
<th>Event handler
135+
<th>Event handler event type
136+
<tbody>
137+
<tr>
138+
<th>{{snapChanged}}
139+
<td>{{scroll!!event}}
140+
<tr>
141+
<th>{{snapChanging}}
142+
<td>{{scroll!!event}}
143+
</table>
144+
145+
<!--
146+
██ ███████ ██ ██ ██████ ██ ██ ███ ██ ██ ████████ ██████
147+
██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██ ██
148+
██ ██ ██ ████ ██ ██ ██ ██ ██ ██ ████ ██ ██ ██ ██
149+
██ ██ ██ ██ ██ ██ ██ ████ █████████ ██ ██ ██ ██ ██ ██ ██ ██████
150+
██ ██ ██ ██ ████ ██ ██ ██ ██ █████████ ██ ████ ██ ██ ██
151+
██ ██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██
152+
████████ ███████ ██ ██ ██████ ██ ██ ██ ██ ██ ██ ████████ ██████
153+
-->
154+
155+
Appendix A: Longhands {#longhands}
156+
==================================
157+
158+
The physical and logical longhands (and their shorthands)
159+
interact as defined in [[!CSS-LOGICAL-1]].
160+
161+
Physical Longhands for 'scroll-start' {#scroll-start-longhands-physical}
162+
----------------------------------------------------------------------
163+
164+
<pre class="propdef">
165+
Name: scroll-start-x, scroll-start-y
166+
Value: auto | [end | center] | <<length-percentage>>
167+
Initial: auto
168+
Applies to: <a>scroll containers</a>
169+
Inherited: no
170+
Percentages: relative to the scroll container’s scrollport
171+
Computed value: the keyword ''scroll-start/auto'' or a computed <<length-percentage>> value
172+
Animation type: by computed value type
173+
</pre>
174+
175+
Negative values are invalid.
176+
177+
Flow-relative Longhands for 'scroll-start' {#scroll-start-longhands-logical}
178+
--------------------------------------------------------------------------
179+
180+
<pre class="propdef">
181+
Name: scroll-start-inline, scroll-start-block
182+
Value: auto | [end | center] | <<length-percentage>>
183+
Initial: auto
184+
Applies to: <a>scroll containers</a>
185+
Inherited: no
186+
Percentages: relative to the scroll container’s scrollport
187+
Computed value: the keyword ''scroll-start/auto'' or a computed <<length-percentage>> value
188+
Animation type: by computed value type
189+
</pre>
190+
191+
Negative values are invalid.

0 commit comments

Comments
 (0)