Playground: touch-action

Let's see how it works on a real touch device.

The touch-action CSS property determines whether touch input MAY trigger default behavior supplied by user agent. This includes, but is not limited to, behaviors such as panning or zooming. See the section on touch-action values.

Pointer Events Level 3 - W3C Editor's Draft https://w3c.github.io/pointerevents/#the-touch-action-css-property

On the div element.

touch-action: auto

Same action as usual.

Touch me!

touch-action: none

If start to touch on this element, all default touch actions be ignored.

Touch me!

touch-action: pan-x

It should probably only be able to scroll horizontally.

Touch me!

touch-action: pan-left

[Experimental feature] It should probably only be able to scroll to left.

Touch me!

touch-action: pan-right

[Experimental feature] It should probably only be able to scroll to right.

Touch me!

touch-action: pan-y

It should probably only be able to scroll vertical.

Touch me!

touch-action: pan-up

[Experimental feature] It should probably only be able to scroll to up.

Touch me!

touch-action: pan-down

[Experimental feature] It should probably only be able to scroll to down.

Touch me!

touch-action: pinch-zoom

It should probably only be able to zoom with multiple fingers.

Touch me!

touch-action: manipulation

Same as `pan-x pan-y pinch-zoom`. But apparently, any additional behaviors supported by auto are out of scope for this specification.

Touch me!

On the button element.

Notice the movement when you double-tap on a button element with pinch-zoom (including manipulation) enabled.

touch-action: auto
touch-action: none
touch-action: pan-x
touch-action: pan-left
touch-action: pan-right
touch-action: pan-y
touch-action: pan-up
touch-action: pan-down
touch-action: pinch-zoom
touch-action: manipulation