Skip to content

[css-scroll-snap-2] Add snapChanged and snapChanging details #9056

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 24, 2024
Merged

[css-scroll-snap-2] Add snapChanged and snapChanging details #9056

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 102 additions & 0 deletions css-scroll-snap-2/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,108 @@ Snap Events {#snap-events}
<th><dfn event>snapChanging</dfn>
<td>{{scroll!!event}}
</table>
<h4>SnapEvents</h4>
<pre class="idl">
[Exposed=Window]
interface SnapEvent : Event {
constructor(DOMString type, optional SnapEventInit eventInitDict = {});
readonly attribute EventTarget? target;
readonly attribute SnapTargetList snappedTargets;
readonly attribute SnapTargetList snapTargets;
readonly attribute boolean invokedProgrammatically;
readonly attribute boolean smoothlyScrolled;
};

[Exposed=Window]
interface SnapTargetList {
readonly attribute SnapTargetArray x;
readonly attribute SnapTargetArray y;
};

[Exposed=Window]
interface SnapTargetArray {
readonly attribute unsigned long length;
getter EventTarget? item (unsigned long index);
};

dictionary SnapEventInit : EventModifierInit {
sequence&lt;EventTarget> snappedTargetsX = [];
sequence&lt;EventTarget> snappedTargetsY = [];
sequence&lt;EventTarget> snapTargetsListX = [];
sequence&lt;EventTarget> snapTargetsListY = [];
};
</pre>

<dl>
<dt><code>SnapEvent . target</code></dt>
<dd>
This is the scroll container of the the snapped-to element.
</dd>
<dt><code>SnapEvent . snappedTargets</code></dt>
<dd>
An object with 2 keys for each axis, each key returns an array of snapped targets.
</dd>
<dt><code>SnapEvent . snapTargets</code></dt>
<dd>
An object with 2 keys for each axis, each key returns an array of the aggregated snap children.
</dd>
<dt><code>SnapEvent . invokedProgrammatically</code></dt>
<dd>
A boolean informing developers if a user or script invoked scroll that caused <a>snapChanged</a>.
</dd>
<dt><code>SnapEvent . smoothlyScrolled</code></dt>
<dd>
A boolean informing developers if the snap change was instant or interpolated.
</dd>
</dl>

<h4> snapChanged </h4>

The event is dispatched when a new snap target has been snapped to, providing what caused it.
It should be dispatched:

* if user scroll interaction has ended and a new item has been rested on. If a user is still touching the screen or the touchpad, this event should not fire, even if the scroll position is exactly at a snapped element's position.
* if animations or transitions change the snapped style of the container or children, IF they have in fact changed the snap target.

<table>
<tr><th>Type</th><td><strong><code>snapChanged</code></strong></td></tr>
<tr><th>Interface</th><td>{{SnapEvent}}</td></tr>
<tr><th>Sync / Async</th><td>Async</td></tr>
<tr><th>Bubbles</th><td>Yes</td></tr>
<tr><th>Trusted Targets</th><td><code>Element</code></td></tr>
<tr><th>Cancelable</th><td>No</td></tr>
<tr><th>Composed</th><td>Yes</td></tr>
<tr><th>Default action</th><td>None</td></tr>
<tr><th>Context<br/>(trusted events)</th><td><ul>
<li>{{Event}}.{{Event/target}} : scroll container of the the snapped-to element</li>
<li>{{SnapEvent}}.{{snappedTargets}} : an object with 2 keys for each axis, each key returns an array of snapped targets</li>
<li>{{SnapEvent}}.{{snapTargets}} : an object with 2 keys for each axis, each key returns an array of the aggregated snap children</li>
<li>{{SnapEvent}}.{{invokedProgrammatically}} : a boolean informing developers if a user or script invoked scroll that caused <a>snapChanged</a></li>
<li>{{SnapEvent}}.{{smoothlyScrolled}} : a boolean informing developers if the snap change was instant or interpolated</li>
</ul></td></tr>
</table>

<h4> snapChanging </h4>

Should fire every time, and as soon as, the UA has determined a new snap child until the new child is snapped to.

<table>
<tr><th>Type</th><td><strong><code>snapChanging</code></strong></td></tr>
<tr><th>Interface</th><td>{{SnapEvent}}</td></tr>
<tr><th>Sync / Async</th><td>Async</td></tr>
<tr><th>Bubbles</th><td>Yes</td></tr>
<tr><th>Trusted Targets</th><td><code>Element</code></td></tr>
<tr><th>Cancelable</th><td>No</td></tr>
<tr><th>Composed</th><td>Yes</td></tr>
<tr><th>Default action</th><td>None</td></tr>
<tr><th>Context<br/>(trusted events)</th><td><ul>
<li>{{Event}}.{{Event/target}} : scroll container of the the snapped-to element.</li>
<li>{{SnapEvent}}.{{snappedTargets}}
<li>{{SnapEvent}}.{{snapTargets}} : an object with 2 keys for each axis, each key returns an array of the aggregated snap children.</li>
<li>{{SnapEvent}}.{{invokedProgrammatically}} : a boolean informing developers if a user or script invoked scroll that caused <a>snapChanged.</a></li>
<li>{{SnapEvent}}.{{smoothlyScrolled}} : a boolean informing developers if the snap change was instant or interpolated.</li>
</ul></td></tr>
</table>

<!--
██ ███████ ██ ██ ██████ ██ ██ ███ ██ ██ ████████ ██████
Expand Down