Skip to content

Commit fdffbb3

Browse files
argyleinkargyleink
committed
adds scroll-start-target, interactions, examples and some terminology
1 parent fcdcb2c commit fdffbb3

File tree

1 file changed

+158
-7
lines changed

1 file changed

+158
-7
lines changed

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

+158-7
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,97 @@ Introduction {#intro}
2828
Scroll experiences don't always start at the beginning. Interactions with
2929
carousels, swipe controls, and listviews often start somewhere in the middle,
3030
and each require Javascript to set this position on page load.
31-
By enabling CSS to specify this scroll start x or y position,
31+
By enabling CSS to specify this scroll start position,
3232
both users, page authors and browsers benefit.
3333

3434
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
35+
developers need insights and events into Scroll Snap.
36+
Events like which element is snapped on which axis,
37+
when the snap event is changing,
38+
when snap completes and conveniences for
3939
snapping to children programatically.
4040

41+
First Layout
42+
------------
43+
44+
This event should follow the Animation code path. When animation objects are created and fire events, this is when a box has it's first layout.
45+
46+
<!--
47+
████████ ██ ██ ███ ██ ██ ████████ ██ ████████ ██████
48+
██ ██ ██ ██ ██ ███ ███ ██ ██ ██ ██ ██ ██
49+
██ ██ ██ ██ ██ ████ ████ ██ ██ ██ ██ ██
50+
██████ ███ ██ ██ ██ ███ ██ ████████ ██ ██████ ██████
51+
██ ██ ██ █████████ ██ ██ ██ ██ ██ ██
52+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
53+
████████ ██ ██ ██ ██ ██ ██ ██ ████████ ████████ ██████
54+
-->
55+
56+
Motivating Examples {#examples}
57+
===============================
58+
59+
<div class="example">
60+
A carousel that starts in the middle:
61+
62+
<pre class="lang-css">
63+
.carousel {
64+
overflow-inline: auto;
65+
scroll-start: center;
66+
}
67+
</pre>
68+
69+
<pre class="lang-html">
70+
&lt;div class="carousel">
71+
&lt;img src="img1.jpg">
72+
&lt;img src="img2.jpg">
73+
&lt;img src="img3.jpg">
74+
&lt;img src="img4.jpg">
75+
&lt;img src="img5.jpg">
76+
&lt;/div>
77+
</pre>
78+
79+
<!-- <figure>
80+
<img src="images/element_snap_positions.png" alt="">
81+
82+
<figcaption>
83+
The layout of the scroll container’s contents in the example.
84+
The snapport is represented by the red rectangle, and the snap area is represented by the yellow rectangle. Since the scroll-snap-align is “center” in the inline (horizontal) axis, a snap position is established at each scroll position which aligns the X-center of the snapport (represented by a red dotted line) with the X-center of a snap area (represented by a yellow dotted line).
85+
</figcaption>
86+
</figure> -->
87+
</div>
88+
89+
<div class="example">
90+
A search bar is available when the user scrolls back to the top:
91+
92+
<pre class="lang-css">
93+
.scrollport {
94+
overflow-block: auto;
95+
}
96+
97+
main {
98+
scroll-start-target: auto;
99+
}
100+
</pre>
101+
102+
<pre class="lang-html">
103+
&lt;div class="scrollport">
104+
&lt;nav>
105+
...
106+
&lt;/nav>
107+
&lt;main>
108+
...
109+
&lt;/main>
110+
&lt;/div>
111+
</pre>
112+
113+
<!-- <figure>
114+
<img src="images/element_snap_positions.png" alt="">
115+
116+
<figcaption>
117+
The layout of the scroll container’s contents in the example.
118+
The snapport is represented by the red rectangle, and the snap area is represented by the yellow rectangle. Since the scroll-snap-align is “center” in the inline (horizontal) axis, a snap position is established at each scroll position which aligns the X-center of the snapport (represented by a red dotted line) with the X-center of a snap area (represented by a yellow dotted line).
119+
</figcaption>
120+
</figure> -->
121+
</div>
41122

42123
Setting Where Scroll Starts {#properties-on-the-scroll-container}
43124
=================================================================
@@ -54,8 +135,7 @@ The 'scroll-start' property {#scroll-start}
54135

55136
This property is a shorthand property that sets all of the scroll-start-* longhands in one declaration.
56137
The first value defines the scroll starting point in the block axis,
57-
the second sets it in the inline axis.
58-
If the second value is omitted, it defaults to ''scroll-start/start''.
138+
the second sets it in the inline axis. If the second value is omitted, it defaults to ''scroll-start/start''. If ''scroll-start-target'' is set on any child, ''scroll-start'' is not used, in favor of using the element as the offset.
59139

60140
Values are defined as follows:
61141

@@ -80,6 +160,30 @@ The 'scroll-start' property {#scroll-start}
80160
Equivalent to ''0%'', ''50%'', and ''100%'', respectively.
81161
</dl>
82162

163+
The 'scroll-start-target' property {#scroll-start-target}
164+
-------------------------------------------
165+
166+
<pre class="propdef shorthand">
167+
Name: scroll-start-target
168+
Value: [ none | auto ]
169+
</pre>
170+
171+
This property is a shorthand property that sets all of the scroll-start-target-* longhands in one declaration.
172+
The first value defines the scroll starting point in the block axis,
173+
the second sets it in the inline axis.
174+
If the second value is omitted, it defaults to ''none''.
175+
176+
Values are defined as follows:
177+
178+
<dl dfn-type=value dfn-for="scroll-start-target, scroll-start-target-x, scroll-start-target-y, scroll-start-target-block, scroll-start-target-inline">
179+
<dt><dfn>none</dfn>
180+
<dd>Element is not a ''scroll-start-target''.
181+
<dt><dfn>auto</dfn>
182+
<dd>Element is used to calculate the ''scroll-start'' position,
183+
taking into account ''scroll-padding''
184+
as if the element was a ''scroll-snap'' target.
185+
</dl>
186+
83187
Styling Snapped Items {#todo}
84188
=============================
85189

@@ -149,6 +253,53 @@ Snap Events {#todo}
149253
<td>{{scroll!!event}}
150254
</table>
151255

256+
<!-- BIG TEXT: INTERACTIONS -->
257+
258+
Interactions with:
259+
==================
260+
261+
The next sections outline interactions with other specs and scroll position effecting scenarios.
262+
263+
''scroll-padding'' and ''scroll-margin''
264+
----------------------------------------
265+
266+
If the scrollport has a in-page '':target'' via a URL fragment or a previous scroll position, then ''scroll-start'' is unused. Existing target logic should go unchanged. This makes ''scroll-start'' a soft request in the scroll position resolution routines.
267+
268+
''fragment navigation''
269+
-----------------------
270+
271+
If the scrollport has a in-page '':target'' via a URL fragment or a previous scroll position, then ''scroll-start'' is unused. Existing target logic should go unchanged. This makes ''scroll-start'' a soft request in the scroll position resolution routines.
272+
273+
''scrollTo()'' options
274+
----------------------
275+
276+
TODO
277+
278+
a ''scroll-snap'' container with only 1 snap child
279+
--------------------------------------------------
280+
281+
This effectively will layout and start scroll at the snapped child, thus negating / cancelling ''scroll-start''. ''scroll-start'' will only work if nothing else has effected the scroll position.
282+
283+
nested scrollers
284+
----------------
285+
286+
Should follow patterns that scroll snap has set.
287+
288+
''display'' is toggled
289+
----------------------
290+
291+
Same behavior that animations follow with ''first layout''.
292+
293+
RTL/LTR
294+
-------
295+
296+
Logical properties are offered for length offsets that should be flow relative. Furthermore, the ''end'' and ''start'' keywords are always logical.
297+
298+
''place-content''
299+
-----------------
300+
301+
TODO
302+
152303
<!--
153304
██ ███████ ██ ██ ██████ ██ ██ ███ ██ ██ ████████ ██████
154305
██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██ ██

0 commit comments

Comments
 (0)