You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: css-scroll-snap-2/Overview.bs
+35-52
Original file line number
Diff line number
Diff line change
@@ -130,7 +130,7 @@ The 'scroll-start' property {#scroll-start}
130
130
131
131
<pre class="propdef shorthand">
132
132
Name: scroll-start
133
-
Value: [ auto | start | end | center | <<length-percentage>> ]{1,2}
133
+
Value: [ auto | start | end | center | left | right | top | bottom | <<length-percentage>> ]{1,2}
134
134
</pre>
135
135
136
136
This property is a shorthand property that sets all of the scroll-start-* longhands in one declaration.
@@ -160,6 +160,36 @@ The 'scroll-start' property {#scroll-start}
160
160
Equivalent to ''0%'', ''50%'', and ''100%'', respectively.
161
161
</dl>
162
162
163
+
<h4 id="display-none-behavior">Interaction with ''display: none'' and initial creation</h4>
164
+
Same behavior that animations follow with <a href="#first-layout">first layout</a>.
165
+
166
+
<h4 id="slow-page-load-behavior">Slow page loading or document streaming behavior</h4>
167
+
TODO
168
+
169
+
<h4 id="fragment-navigation-behavior">Interaction with ''fragment navigation''</h4>
170
+
TODO
171
+
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.
172
+
173
+
<h4 id="place-content-behavior">Interaction with ''place-content''</h4>
174
+
TODO
175
+
Side note: While ''place-content'' can make a scroller appear to start in the center
176
+
or end, no browser supports it and it appears complicated to resolve.
177
+
178
+
<h4 id="find-in-page-behavior">Interaction with "find in page"</h4>
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.
183
+
184
+
<h4 id="nested-scrollers">Nested scrollers with ''scroll-start''</h4>
185
+
Should follow patterns that scroll snap has set.
186
+
187
+
<h4 id="toggling-display-none">Interaction when ''display'' is toggled</h4>
188
+
Same behavior that animations follow with ''first layout''.
189
+
190
+
<h4 id="rtl">Interaction with RTL and LTR</h4>
191
+
Logical properties are offered for length offsets that should be flow relative. Furthermore, the ''end'' and ''start'' keywords are always logical.
192
+
163
193
The 'scroll-start-target' property {#scroll-start-target}
164
194
-------------------------------------------
165
195
@@ -180,8 +210,8 @@ The 'scroll-start-target' property {#scroll-start-target}
180
210
<dd>Element is not a ''scroll-start-target''.
181
211
<dt><dfn>auto</dfn>
182
212
<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.
213
+
taking into account ''scroll-padding''or ''scroll-margin'' ,
214
+
same as a ''scroll-snap'' target.
185
215
</dl>
186
216
187
217
Styling Snapped Items {#todo}
@@ -219,7 +249,7 @@ More specific options are defined as follows:
Need to figure out resolution of the initial frame.
221
251
222
-
Snap Events {#todo}
252
+
Snap Events {#snap-events}
223
253
===================
224
254
225
255
<!--
@@ -232,7 +262,7 @@ Snap Events {#todo}
232
262
████████ ███ ████████ ██ ██ ██ ██████
233
263
-->
234
264
235
-
{{snapChanged}} and {{snapChanging}} {#todo}
265
+
{{snapChanged}} and {{snapChanging}} {#snapchanged-and-snapchanging}
236
266
--------------------------------------------
237
267
238
268
CSS scroll snap points are often used as a mechanism to
@@ -256,53 +286,6 @@ Snap Events {#todo}
256
286
<td>{{scroll!!event}}
257
287
</table>
258
288
259
-
<!-- BIG TEXT: INTERACTIONS -->
260
-
261
-
Interactions with:
262
-
==================
263
-
264
-
The next sections outline interactions with other specs and scroll position effecting scenarios.
265
-
266
-
''scroll-padding'' and ''scroll-margin''
267
-
----------------------------------------
268
-
269
-
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.
270
-
271
-
''fragment navigation''
272
-
-----------------------
273
-
274
-
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.
275
-
276
-
''scrollTo()'' options
277
-
----------------------
278
-
279
-
TODO
280
-
281
-
a ''scroll-snap'' container with only 1 snap child
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.
285
-
286
-
nested scrollers
287
-
----------------
288
-
289
-
Should follow patterns that scroll snap has set.
290
-
291
-
''display'' is toggled
292
-
----------------------
293
-
294
-
Same behavior that animations follow with ''first layout''.
295
-
296
-
RTL/LTR
297
-
-------
298
-
299
-
Logical properties are offered for length offsets that should be flow relative. Furthermore, the ''end'' and ''start'' keywords are always logical.
0 commit comments