Re: [csswg-drafts] CSS Snap Points: Event Model Missing (#156)

Just to get the ball rolling, here is how I imagine an event model for scroll snapping could look like:

# Syntax

`snapped` event

Type: snapped
Interface: SnapEvent
Sync / Async: Sync
Bubbles: Yes
Trusted Targets: Element
Cancelable: No
Composed: Yes
Default action: None
Context (trusted events):
* Event.target: event target snapping the scrollport
* UIEvent.view: Window
* UIEvent.detail: 0
* SnapEvent.relatedTarget: previous event target snapping the scrollport
* SnapEvent.scrollContainer: scroll container the event target is in
* SnapEvent.inlineSnapPosition: box's snap position in the inline axis as an alignment of its snap area
* SnapEvent.blockSnapPosition: box's snap position in the block axis as an alignment of its snap area

```
interface SnapEvent {
 readonly attribute EventTarget? relatedTarget = null;
 readonly attribute EventTarget scrollContainer;
 readonly attribute DOMString inlineSnapPosition;
 readonly attribute DOMString blockSnapPosition;
};
```

# Expected behavior

The `snapped` event is dispatched on the scroll container after snapping happened at a snap position. This allows an author to know when snapping happened and what caused it.

# Use cases

* Knowing the element where snapping happened in order to get the number of a slide in a presentation or adjust the indicator for the currently shown image in a gallery.
* Styling the scroll container or the snapping element differently when snapping.
* Knowing how an element snapped to be able to adjust the layout and styling of other elements.

That's just a rough draft and I probably missed some use cases and things required to cover them. Also note that the `snapped` event defined here is triggered _after_ snapping has happened, as I couldn't come up with use cases in which you'd want an event that is triggered before snapping. Though maybe there are cases in which you want to know beforehand when snapping will happen and maybe be able to cancel it.

So I encourage everyone to comment on this idea and come up with more use cases.

@scottjehl You mentioned three events, though I am not sure what `snapstart` and `snapstop` were meant to be for and when they should be triggered. I assume the `snapped` event I described is what you called `snapchange`.

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/156#issuecomment-695085852 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 18 September 2020 21:05:17 UTC