-
Notifications
You must be signed in to change notification settings - Fork 642
/
Overview.bs
610 lines (508 loc) · 27.7 KB
/
Overview.bs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
<pre class='metadata'>
Title: CSS Scroll Snap Module Level 2
Group: csswg
Shortname: css-scroll-snap
Level: 2
Status: ED
Implementation Report: https://wpt.fyi/results/css/css-scroll-snap
Work Status: Testing
ED: https://drafts.csswg.org/css-scroll-snap-2/
Editor: Matt Rakow, Microsoft, w3cid 62267
Editor: Jacob Rossi, Microsoft, w3cid 45616
Editor: Tab Atkins-Bittner, Google, http://xanthir.com/contact/, w3cid 42199
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Adam Argyle, Google, https://nerdy.dev, w3cid 112669
Abstract: This module contains features to control panning and scrolling behavior with “snap positions”.
Status Text:
A test suite and an implementation report will be produced during the
CR period.
Ignore MDN Failure: margin-longhands-logical
Ignore MDN Failure: margin-longhands-physical
Ignore MDN Failure: propdef-scroll-margin-block
Ignore MDN Failure: propdef-scroll-margin-inline
Ignore MDN Failure: scroll-margin
Ignore MDN Failure: padding-longhands-logical
Ignore MDN Failure: padding-longhands-physical
Ignore MDN Failure: scroll-padding
Ignore MDN Failure: propdef-scroll-padding-block
Ignore MDN Failure: propdef-scroll-padding-inline
Ignore MDN Failure: scroll-snap-align
Ignore MDN Failure: scroll-snap-stop
Ignore MDN Failure: scroll-snap-type
</pre>
Introduction {#intro}
=====================
<em>This section is not normative.</em>
<em>This is currently a delta spec over Scroll Snap 1.</em>
Scroll experiences don't always start at the beginning. Interactions with
carousels, swipe controls, and listviews often intend to begin from some element
which might not be positioned at the beginning of the scroll container.
JavaScript is required to make the scroll container initially scrolled
to that element. By enabling CSS to specify that an element should be
initially scrolled to, both users, page authors and browsers benefit.
In addition to setting an initial scroll target,
developers need insights and events into Scroll Snap.
Events like which element is snapped on which axis,
when the snap event is changing,
when snap completes and conveniences for
snapping to children programmatically.
First Layout {#first-layout}
------------
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.
<!-- Big Text: examples
█████▌ █ █ ███▌ █ █ ████▌ █▌ █████▌ ███▌
█▌ █ █ ▐█ ▐█ ██ ██ █▌ █▌ █▌ █▌ █▌ █▌
█▌ █ █ █▌ █▌ █▌█ █▐█ █▌ █▌ █▌ █▌ █▌
████ █ █▌ █▌ █▌ █ ▐█ ████▌ █▌ ████ ███▌
█▌ █ █ █████▌ █▌ ▐█ █▌ █▌ █▌ █▌
█▌ █ █ █▌ █▌ █▌ ▐█ █▌ █▌ █▌ █▌ █▌
█████▌ █ █ █▌ █▌ █▌ ▐█ █▌ █████ █████▌ ███▌
-->
Motivating Examples {#examples}
===============================
<div class="example">
A carousel that starts scrolled to the middle image:
<pre class="lang-css">
.carousel {
overflow-inline: auto;
}
.carousel .origin {
scroll-start-target: auto;
}
</pre>
<pre class="lang-html">
<div class="carousel">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg" class="origin">
<img src="img4.jpg">
<img src="img5.jpg">
</div>
</pre>
</div>
<div class="example">
A search bar is available when the user scrolls back to the top:
<pre class="lang-css">
.scrollport {
overflow-block: auto;
}
main {
scroll-start-target: auto;
}
</pre>
<pre class="lang-html">
<div class="scrollport">
<nav>
...
</nav>
<main>
...
</main>
</div>
</pre>
<!-- <figure>
<img src="images/element_snap_positions.png" alt="">
<figcaption>
The layout of the scroll container’s contents in the example.
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).
</figcaption>
</figure> -->
</div>
Setting Where Scroll Starts {#properties-on-the-scroll-container}
=================================================================
The 'scroll-start-target' property {#scroll-start-target}
-------------------------------------------
<h4 dfn export id="initial-scroll-target">
Initial scroll target</h4>
The [=initial scroll target=] of a <a>scroll container</a> |scrollcontainer|
is an element or pseudo-element
whose 'scroll-start-target'property is non-''scroll-start-target/none''
and whose nearest <a>scroll container</a> is |scrollcontainer|.
When multiple such elements or pseudo-elements exist,
user-agents should select the one
which comes first in [=tree order=].
When no such element or pseudo-element exists,
|scrollcontainer|’s <a>initial scroll target</a> is null.
<div algorithm="determine the initial scroll position from an initial scroll target">
If the <a>initial scroll target</a> of a <a>scroll container</a> is not null,
it should be used to determine the <a>initial scroll position</a> of |scrollcontainer|
by running the following steps:
1. Let |target| be the <a>initial scroll target</a> for |scrollcontainer|.
1. Let |position| be the result of running the steps to
<a spec="cssom-view-1">determine the scroll-into-view position</a> of |target|
with <var ignore>behavior</var> set to "auto",
<var ignore>block</var> set to "start",
<var ignore>inline</var> set to "nearest",
and <var ignore>scrolling box</var> set to |scrollcontainer|.
1. Set |scrollcontainer|'s <a>initial scroll position</a> to |position|.
</div>
<h4 id="scroll-start-target-propdef">scroll-start-target Property Definition</h4>
<pre class="propdef">
Name: scroll-start-target
Value: [ none | auto ]
Initial: ''none''
Applies to: all elements
Inherited: no
Percentages: N/A
Computed Value: see individual properties
Animation type: none
</pre>
<dl dfn-type=value dfn-for="scroll-start-target, scroll-start-target-block, scroll-start-target-inline, scroll-start-target-x, scroll-start-target-y">
<dt><dfn>none</dfn>
<dd>The element is not an [=initial scroll target=].
<dt><dfn>auto</dfn>
<dd>The element is potentially an [=initial scroll target=]
for its nearest [=scroll container=] ancestor.
</dl>
<h4 id="scroll-start-target-with-place-content">
Interaction with 'place-content'</h4>
If a [=scroll container's=] [=initial scroll position=]
is potentially set by both a [=content-distribution property=]
and by 'scroll-start-target' on a descendant,
'scroll-start-target' wins.
<h4 id="scroll-start-fragment-navigation">
Post-first layout arrivals</h4>
While the document is being [[html#updating-the-document|updated]],
a <a>scroll container's</a> [=initial scroll target=] might arrive
after that <a>scroll container</a> has been laid out.
If this happens,
user agents should still scroll to the [=initial scroll target=]
unless the user agent has reason to believe
the user is no longer interested
in scrolling to the <a>initial scroll position</a>.
<!-- Big Text: :snapped
█▌ ███▌ █ █▌ ███▌ ████▌ ████▌ █████▌ ████▌
███▌ █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ █▌ █▌ █▌ █▌
█▌ █▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
███▌ █▌▐█ █▌ █▌ █▌ ████▌ ████▌ ████ █▌ █▌
█▌ █▌ █▌ ██▌ █████▌ █▌ █▌ █▌ █▌ █▌
███▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
█▌ ███▌ █▌ ▐▌ █▌ █▌ █▌ █▌ █████▌ ████▌
-->
Styling Snapped Items {#styling-snapped}
=============================
Issue: The ':snapped' pseudo-class is being dropped in favor of a
<a href="https://drafts.csswg.org/css-contain-4/scroll_state_explainer.html">container state query</a> approach.
The Snapped-element Pseudo-class: '':snapped'' {#snapped}
-------------------------------------------------------
The <dfn selector>:snapped</dfn> pseudo-class matches any scroll snap targets,
regardless of axis.
The longform physical and logical pseudo-class selectors
allow for more finite snapped children styling
as they can target an individual axis.
More specific options are defined as follows:
<dl dfn-type=selector>
<dt><dfn>:snapped-x</dfn>
<dd>
Matches the child snapped on the horizontal axis.
<dt><dfn>:snapped-y</dfn>
<dd>
Matches the child snapped on the vertical axis.
<dt><dfn>:snapped-inline</dfn>
<dd>
Matches the child snapped on the [=inline=] axis.
<dt><dfn>:snapped-block</dfn>
<dd>
Matches the child snapped on the [=block=] axis.
</dl>
Note: <a href="https://github.com/w3c/csswg-drafts/issues/6985#issuecomment-1049036401">Issue #6985</a><br>
Need to figure out resolution of the initial frame.
Snap Events {#snap-events}
===================
<!-- Big Text: events
█████▌ █▌ █▌ █████▌ █ █▌ █████▌ ███▌
█▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
█▌ █▌ █▌ █▌ ██▌ █▌ █▌ █▌
████ ▐▌ █ ████ █▌▐█ █▌ █▌ ███▌
█▌ █ ▐▌ █▌ █▌ ██▌ █▌ █▌
█▌ ▐▌ █ █▌ █▌ █▌ █▌ █▌ █▌
█████▌ ▐█ █████▌ █▌ ▐▌ █▌ ███▌
-->
{{scrollsnapchange}} and {{scrollsnapchanging}} {#scrollsnapchange-and-scrollsnapchanging}
--------------------------------------------
CSS scroll snap points are often used as a mechanism to
create scroll interactive "selection" components,
where selection is determined with JavaScript intersection observers
and a scroll end guestimate. By creating a built-in event,
the invisible state will become actionable,
at the right time, and always correct.
<h4 id="snapTarget">
Snap Targets</h4>
A <dfn export>snap target</dfn> is an element or pseudo-element which the
user-agent has [[css-scroll-snap-1#choosing|chosen]] to
<a spec="css-scroll-snap-1" lt="scroll snap">snap</a>
a given <a spec=css-scroll-snap lt="scroll snap container">snap container</a> to.
<table class="data" id="eventhandlers" dfn-type=event dfn-for=SnapEvent>
<thead>
<tr>
<th>Event
<th>Interface
<th>Targets
<th>Description
<tbody>
<tr>
<th><dfn>scrollsnapchange</dfn>
<td>{{SnapEvent}}
<td>scroll containers
<td>Fired at the scrolling element or {{Document}} at the end of a scroll (before a {{scrollend}} event)
or after a [[css-scroll-snap-1#re-snap|layout snap]]
if the [=snap targets=] that the scrolling element or Document is snapped to changed.
<tr>
<th><dfn>scrollsnapchanging</dfn>
<td>{{SnapEvent}}
<td>scroll containers
<td>Fired at the scrolling element or {{Document}} during scrolling (before a {{scroll!!event}} event),
if the [=snap targets=] that the scrolling would cause the scroller to snap to are
different from the [=snap targets=] selected at the last scrollsnapchanging event that was fired.
</table>
<h4 id="scrollsnapchange">
{{scrollsnapchange}}</h4>
{{scrollsnapchange}} indicates that the snap area to which a snap container is snapped along either axis has changed.
{{scrollsnapchange}} is dispatched:
<ol>
<li>
when a scrolling operation is <a spec="cssom-view-1" lt="scroll completed">completed</a>
if, for either the block or inline axis, the
[=snap target=] which the snap container is snapped to is different from the [=snap target=]
it most recently snapped to in that axis. For snap containers with
''scroll-snap-type/proximity'' strictness, the scroll may result in the snap
container no longer being snapped to any [=snap target=]. [[css-scroll-snap-1#choosing]]
describes the method a UA follows when choosing between elements or pseudo-elements which are
<a spec="css-scroll-snap-1" lt="scroll snap area">snap areas</a>.
<li> if there is a change to a snap container's style such that it goes from
having a non-''scroll-snap-type/none'' value for 'scroll-snap-type'
to having a ''scroll-snap-type/none'' value or vice versa.
<li> if, after a [[css-scroll-snap-1#re-snap|layout change]], the [=snap target=] to
which a snap container is snapped to changes, regardless of whether there is
a change in scroll position after the layout change.
</ol>
Scrolling operations always lead to {{scrollend}} events being fired. If a
scrolling operation also results in a {{scrollsnapchange}} event being fired, the
{{scrollsnapchange}} event should be fired before the {{scrollend}} event.
Each {{Document}} has an associated list of
<dfn export for=Document>pending scrollsnapchange event targets</dfn>, initially empty.
Each
<a spec=css-scroll-snap lt="scroll snap container">snap container</a> has
one <dfn export>scrollsnapchangeTargetBlock</dfn> and one
<dfn export>scrollsnapchangeTargetInline</dfn> in the block and inline axes
respectively, each of which can either be null if the container is not
snapped in that axis or the [=snap target=] to which the container is snapped.
When asked to <dfn export for=Document>update scrollsnapchange targets</dfn>
for a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>,
|snapcontainer|, run these steps:
1. Let <var>doc</var> be |snapcontainer|'s associated {{Document}}.
1. Let <var>blockTarget</var> be the <a>scrollsnapchangeTargetBlock</a> associated
with |snapcontainer|.
1. Let <var>inlineTarget</var> be the <a>scrollsnapchangeTargetInline</a> associated
with |snapcontainer|.
1. Let <var>blockScrollSnapchangingTarget</var> be the <a>scrollsnapchanging block-axis target</a>
associated with |snapcontainer|.
1. Let <var>inlineScrollSnapchangingTarget</var> be the
<a>scrollsnapchanging inline-axis target</a> associated with |snapcontainer|.
1. Let <var>snap targets changed</var> be a boolean flag that is initially false.
1. If <var>blockTarget</var> is not the same [=snap target=] as <var>blockScrollSnapchangingTarget</var> or
1. Set the <a>scrollsnapchangeTargetBlock</a> associated with |snapcontainer| to
<var>blockScrollSnapchangingTarget</var>.
1. Set <var>snap targets changed</var> to true.
1. If <var>inlineTarget</var> is not the same [=snap target=] as <var>inlineScrollSnapchangingTarget</var>:
1. Set the <a>scrollsnapchangeTargetInline</a> associated with |snapcontainer| to
<var>inlineScrollSnapchangingTarget</var>.
1. Set <var>snap targets changed</var> to true.
1. If <var>snap targets changed</var> is true:
1. If |snapcontainer| is not already in <var>doc</var>'s
<a>pending scrollsnapchange event targets</a>:
1. Append |snapcontainer| to <var>doc</var>'s
<a>pending scrollsnapchange event targets</a>.
Note: When snapping occurs on a scroller (either due to a layout change or a
scrolling operation) the <a>scrollsnapchanging block-axis target</a> and <a>scrollsnapchanging inline-axis target</a>
associated with that scroller are updated and represent the current snap targets
of that scroller. This allows the <a>update scrollsnapchange targets</a> algorithm
to use these [=snap targets=] to determine whether a {{scrollsnapchange}} event should be fired.
When asked to <dfn export for=Document>dispatch pending scrollsnapchange events</dfn> for a {{Document}},
<var>doc</var>, run these steps:
1. For each item <var>target</var> in |doc|'s <a>pending scrollsnapchange event targets</a>:
1. Let |blockTarget| and |inlineTarget| be null initially.
1. If the <a>scrollsnapchangeTargetBlock</a> associated with <var>target</var> is a pseudo-element,
set |blockTarget| to the owning element of that <a>scrollsnapchangeTargetBlock</a>.
1. Otherwise, set |blockTarget| to that <a>scrollsnapchangeTargetBlock</a>.
1. If the <a>scrollsnapchangeTargetInline</a> associated with <var>target</var> is a pseudo-element,
set |inlineTarget| to the owning element of that <a>scrollsnapchangeTargetInline</a>.
1. Otherwise, Set |inlineTarget| to that <a>scrollsnapchangeTargetInline</a>.
1. Fire a {{SnapEvent}}, |snapevent|, named {{scrollsnapchange}} at <var>target</var>
and let |snapevent|'s {{SnapEvent/snapTargetBlock}} and
{{SnapEvent/snapTargetInline}} attributes be |blockTarget| and |inlineTarget| respectively.
1. Empty <var>doc</var>'s <a>pending scrollsnapchange event targets</a>.
<h4 id="scrollsnapchanging"> scrollsnapchanging </h4>
{{scrollsnapchanging}} is dispatched:
* during a scrolling operation, if the [=snap targets=] to which a
<a spec=css-scroll-snap lt="scroll snap container">snap container</a> would
<a spec="css-scroll-snap-1" lt="scroll snap">snap</a> (in either axis) changes, or
* if a [[css-scroll-snap-1#re-snap|layout change]] occurs such that a {{scrollsnapchange}} event
is to be dispatched. In this case, as with the scrolling case, the {{scrollsnapchanging}} event
should be dispatched before the {{scrollsnapchange}} event.
A scrolling operation might animate towards a particular position (e.g.
scrollbar arrow clicks, arrow key presses, "behavior: smooth" programmatic
scrolls) or might directly track a user's input (e.g. touch scrolling, scrollbar
dragging). In either case, the user agent [[css-scroll-snap-1#choosing|chooses]] an
<dfn export>eventual snap target</dfn> in each axis to which the scroller will
<a spec="css-scroll-snap-1" lt="scroll snap">snap</a> after the scrolling operation
reaches its intended scroll position.
* In the former case, the intended scroll position is the scroll animation's
target scroll offset.
* In the latter case, the intended scroll position is the current scroll offset as
determined by the user's input.
{{scrollsnapchanging}} aims to let the web page know, as early as possible,
that the scrolling operation will result in a change in the [=snap target=] the snap
container is snapped to. The user agent should evaluate whether to trigger
{{scrollsnapchanging}} based on the <a>eventual snap target</a> to which the scroller would
<a spec="css-scroll-snap-1" lt="scroll snap">snap</a> were the scrolling operation
to reach its intended scroll position.
Note: Since scrollsnapchanging gives the web page hints about future snapping,
the snapping hinted at by a scrollsnapchanging event might not materialize since it
will be possible for subsequent scrolling input to further alter the snap
container's scroll position and result in a different eventual snap target.
{{scrollsnapchanging}} events are fired before {{scroll!!event}} events.
Each {{Document}} has an associated list of
<dfn export for=Document>pending scrollsnapchanging event targets</dfn>, initially empty.
Each
<a spec=css-scroll-snap lt="scroll snap container">snap container</a> has
one <dfn>scrollsnapchanging block-axis target</dfn>
and one <dfn>scrollsnapchanging inline-axis target</dfn> in the block and inline axes
respectively, each of which can either be null if the container is not
snapping in that axis or the [=snap target=] to which the container is snapping.
When asked to <dfn export for=Document>update scrollsnapchanging targets</dfn>
for a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>,
|snapcontainer|, given an [=snap target=] newBlockTarget and an [=snap target=]
newInlineTarget, run these steps:
1. Let <var>doc</var> be |snapcontainer|'s associated {{Document}}.
1. Let <var>blockTarget</var> be the <a>scrollsnapchanging block-axis target</a> that is
associated with |snapcontainer|.
1. Let <var>inlineTarget</var> be the <a>scrollsnapchanging inline-axis target</a> that is
associated with |snapcontainer|.
1. If <var>newBlockTarget</var> is not the same [=snap target=] as <var>blockTarget</var>:
1. Set the <a>scrollsnapchanging block-axis target</a> associated with |snapcontainer| to
<var>newBlockTarget</var>.
1. If |snapcontainer| is not already in <var>doc</var>'s
<a>pending scrollsnapchanging event targets</a>,
1. Append |snapcontainer| to <var>doc</var>'s
<a>pending scrollsnapchanging event targets</a>
1. If <var>newInlineTarget</var> is not the same [=snap target=] as <var>inlineTarget</var>:
1. Set the <a>scrollsnapchanging inline-axis target</a> associated with |snapcontainer| to
<var>newInlineTarget</var>.
1. If |snapcontainer| is not already in <var>doc</var>'s
<a>pending scrollsnapchanging event targets</a>,
1. Append |snapcontainer| to <var>doc</var>'s
<a>pending scrollsnapchanging event targets</a>.
When asked to <dfn export for=Document>dispatch pending scrollsnapchanging events</dfn> for a {{Document}},
<var>doc</var>, run these steps:
1. For each item <var>target</var> in |doc|'s <a>pending scrollsnapchanging event targets</a>:
1. Let |blockTarget| and |inlineTarget| be null initially.
1. If the <a>scrollsnapchanging block-axis target</a> associated with <var>target</var> is a pseudo-element,
set |blockTarget| to the owning element of that <a>scrollsnapchanging block-axis target</a>.
1. Otherwise, set |blockTarget| to that <a>scrollsnapchanging block-axis target</a>.
1. If the <a>scrollsnapchanging inline-axis target</a> associated with <var>target</var> is a pseudo-element,
set |inlineTarget| to the owning element of that <a>scrollsnapchanging inline-axis target</a>.
1. Otherwise, set |inlineTarget| to that <a>scrollsnapchanging inline-axis target</a>.
1. Fire a {{SnapEvent}}, |snapevent|, named {{scrollsnapchanging}} at <var>target</var>
and let |snapevent|'s {{SnapEvent/snapTargetBlock}} and
{{SnapEvent/snapTargetInline}} attributes be |blockTarget| and |inlineTarget|, respectively.
1. Empty <var>doc</var>'s <a>pending scrollsnapchanging event targets</a>.
<h4 id="snap-events-on-layout-changes">Snap Events due to Layout Changes </h4>
When a <a spec=css-scroll-snap lt="scroll snap container">snap container</a>,
|snapcontainer|, [[css-scroll-snap-1#re-snap|re-snaps]], run these steps:
1. Let <var>newBlockTarget</var> be the [=snap target=] that |snapcontainer| has
<a spec="css-scroll-snap-1" lt="scroll snap">snapped</a> to
in the block axis or null if it did not snap to any element.
1. Let <var>newInlineTarget</var> be the [=snap target=] that |snapcontainer| has
<a spec="css-scroll-snap-1" lt="scroll snap">snapped</a> to
in the inline axis or null if it did not snap to any element or pseudo-element.
1. Run the steps to <a>update scrollsnapchanging targets</a> with <var>newBlockTarget</var>
as newBlockTarget and <var>newInlineTarget</var> as newInlineTarget.
1. Run the steps to <a>update scrollsnapchange targets</a> for |snapcontainer|.
SnapEvent interface {#snapevent-interface}
-------------------
<pre class="idl">
dictionary SnapEventInit : EventInit {
Node? snapTargetBlock;
Node? snapTargetInline;
};
[Exposed=Window]
interface SnapEvent : Event {
constructor(DOMString type, optional SnapEventInit eventInitDict = {});
readonly attribute Node? snapTargetBlock;
readonly attribute Node? snapTargetInline;
};
</pre>
<dl dfn-type=attribute dfn-for=SnapEvent>
: <dfn>snapTargetBlock</dfn>
::
The element that the snap container is snapped to in the block axis
at the <a spec="css-scroll-snap-1" lt="scroll snap position">snap position</a>
for the associated snap event. If the [=snap target=]
corresponding to this was a pseudo-element, this will be the owning
element of that pseudo-element.
: <dfn>snapTargetInline</dfn>
::
The element that the snap container is snapped to in the inline axis
at the <a spec="css-scroll-snap-1" lt="scroll snap position">snap position</a>
for the associated snap event. If the [=snap target=]
corresponding to this was a pseudo-element, this will be the owning
element of that pseudo-element.
</dl>
For {{scrollsnapchange}} events,
the snap position is the position
already realized by the snap container after a scroll snap.
For {{scrollsnapchanging}} events
it is the snap position
that the snap container will eventually snap to
when the scrolling operation ends.
{{SnapEvent}}s do not bubble except when the event target is the {{Document}}.
{{SnapEvent}}s are not cancellable.
<!-- Big Text: Longhand
█▌ ███▌ █ █▌ ███▌ █▌ █▌ ███▌ █ █▌ ████▌
█▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐█ ▐█ █▌ █▌ █▌ █▌
█▌ █▌ █▌ ██▌ █▌ █▌ █▌ █▌ █▌ █▌ ██▌ █▌ █▌ █▌
█▌ █▌ █▌ █▌▐█ █▌ █▌ ██▌ █████▌ █▌ █▌ █▌▐█ █▌ █▌ █▌
█▌ █▌ █▌ █▌ ██▌ █▌ █▌ █▌ █▌ █████▌ █▌ ██▌ █▌ █▌
█▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌
█████ ███▌ █▌ ▐▌ ███▌ █▌ █▌ █▌ █▌ █▌ ▐▌ ████▌
-->
Appendix A: Event Handlers {#event-handlers}
============================================================
ISSUE: This section should be moved to the HTML event handler
<a href="https://html.spec.whatwg.org/#event-handlers-on-elements,-document-objects,-and-window-objects">specification</a>.
Event handlers on elements, Document objects and Window objects {#event-handlers-on-elements-document-and-window-objects}
------------------------------------------------------------------------------------------------------
The following are additional <a>event handlers</a> (and their corresponding <a>event handler event types</a>)
that must be supported by all <a>HTML elements</a> as both <a>event handler content attributes</a>
and <a>event handler IDL attributes</a>; and that must be supported by all {{Window}} objects and {{Document}} objects, as
<a>event handler IDL attributes</a>:
<table class="data" dfn-type=attribute dfn-for="Document,Element,Window">
<tr>
<th><a>Event handler</a>
<th><a>Event handler event type</a>
<tr>
<td><dfn>onscrollsnapchange</dfn>
<td>{{scrollsnapchange}}
<tr>
<td><dfn>onscrollsnapchanging</dfn>
<td>{{scrollsnapchanging}}
</table>
Extensions to the <code>GlobalEventHandlers</code> Interface Mixin {#interface-globaleventhandlers}
--------------------------------------------------------------------------------------------------------
This specification extends the {{GlobalEventHandlers}} interface mixin from
HTML to add <a>event handler IDL attributes</a> for {{SnapEvent}}s as defined
in [[#event-handlers-on-elements-document-and-window-objects]].
<h4 id="interface-globaleventhandlers-idl">IDL Definition</h4>
<pre class="idl">
partial interface mixin GlobalEventHandlers {
attribute EventHandler onsnapchanged;
attribute EventHandler onsnapchanging;
};
</pre>
Privacy Considerations {#privacy}
======================
The features in this spec have no known privacy implications.
Security Considerations {#security}
=======================
The features in this spec have no known security implications.