Riff / Built on the open web / Behaviour

touch-action

Claims the swipes and drags so the browser does not scroll instead.

Now Playing with the Up next sheet open, listing the rest of the post's tracks — The handle on the Up next sheet, a drag zone that takes the whole touch.

How Riff uses it

The bar's info area allows vertical page scrolling but claims horizontal movement, so the swipe-to-skip gesture gets its pointer events. Now Playing's header and stage take all touches for drag-down-to-close, and the Up next handle takes all touches for the sheet drag. On a wide screen there is no drag-to-close, so those go back to auto.

Why

Without it the browser would scroll or zoom during the gesture and cancel the pointer events.

Without it

The gestures compete with page scrolling.

Where

plugins/riff/assets/riff.css, line 569
```
touch-action: pan-y;
```
plugins/riff/assets/riff.css, line 829
```
touch-action: none;
```

plugins/riff/assets/riff.js, line 1227

zone.addEventListener( 'pointerdown', ( e ) => {

Links open the source at the commit this page was published from.

Reference: touch-action on MDN.