Experiment with driving Tossable with scroll events

[appsforartists]

AMP foregoes pointer events entirely because iframe ad containers eat them. This makes the experience crappy in the general case (dragging images) to make the occasional case (dragging ads) possible.

Can we build a Tossable interaction that prefers pointer events, but can fallback to scroll events?

[appsforartists]

If you had a stream of scroll events that had inertial scrolling disabled, you ought to be able to write:

pointerEventStreamsFromScroll$(scroll$)

which would give you a simulated { down$, move$, up$ } that could be merged with the canonical ones and fed into Draggable.

Proof-of-concept: https://codepen.io/appsforartists/pen/aWXYpb

[appsforartists]

This approach could also be useful for implementing interactions like overscroll-to-close.

The problem there is that you must declare ahead of time whether dragging an element should scroll it or dispatch pointer events, which makes overscroll impossible to achieve with pointerevents alone. One potential workaround is to listen for scrollY to idle at 0. When it does, add padding to the scroll area and offset scrollY to match, e.g. paddingTop = '100vh'; scrollY = window.innerHeight; backgroundColor: 'transparent'. That will give you scroll events for overscroll, which can be (manually) mapped to PartialPointerEvents and used to implement overscroll.

A nicer proposal is in w3c/pointerevents#211

[appsforartists]

On https://mobile.twitter.com/notifications, it looks like handleTouchMove (in shared) is called on overscroll, which sets pullDistance.