Widely available Supported across all major browsers. Safe to use in production.

touch-action

The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).

By default, panning (scrolling) and pinching gestures are handled exclusively by the browser. An application using Pointer events will receive a pointercancel event when the browser starts handling a touch gesture. By explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in pointermove and pointerup listeners for the remaining gestures. Applications using Touch events disable the browser handling of gestures by calling preventDefault(), but should also use touch-action to ensure the browser knows the intent of the application before any event listeners have been invoked.

When a gesture is started, the browser intersects the touch-action values of the touched element and its ancestors, up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, touch-action is typically applied only to top-level elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element's descendants.

Note: After a gesture starts, changes to touch-action will not have any impact on the behavior of the current gesture.

Other

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
touch-action
36
12
52
13
36
9.3
manipulation
36
12
52
13
36
9.3
none
36
12
52
13
36
13
pan-down
55
79
55
pan-left
55
79
55
pan-right
55
79
55
pan-up
55
79
55
pan-x
36
12
52
13
36
13
pan-y
36
12
52
13
36
13
pinch-zoom
56
12
85
13
56
13
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Not applicable to Firefox platforms that support neither pointer nor touch events.
Notes 1 item(s)
Implementation note
  • Not applicable to Firefox platforms that support neither pointer nor touch events.
Notes 1 item(s)
Implementation note
  • Not applicable to Firefox platforms that support neither pointer nor touch events.
Notes 1 item(s)
Implementation note
  • Not applicable to Firefox platforms that support neither pointer nor touch events.
Notes 1 item(s)
Implementation note
  • Not applicable to Firefox platforms that support neither pointer nor touch events.
Notes 1 item(s)
Implementation note
  • Not applicable to Firefox platforms that support neither pointer nor touch events.

Syntax

CSS 
/* Disable default scrolling in the custom swipe UI */
.swipe-area {
  touch-action: none;
}

/* Disable all actions except double-tap zoom */
.button {
  touch-action: manipulation;
}

/* Allow horizontal scrolling only */
.horizontal-scroll {
  touch-action: pan-x;
}

Live demo

None(alloperationdisabled)

touch-action None(alloperationdisabled) demo.

PreviewFullscreen

manipulation

touch-action Manipulation demo.

PreviewFullscreen

Pan-x(horizontalscroll. only)

touch-action Pan-x(horizontalscroll. only) demo.

PreviewFullscreen

Use cases

  • Using touch-action

    The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links