CSS touch-action Property

Description

The touch-action CSS property controls how a touchscreen user can interact with an element. It can be used to disable the browser's default handling of touch gestures, such as panning and zooming, or to allow the browser to handle only certain gestures.

Initial value
auto
Applies to
all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups
Inherited
no
Computed value
as specified
Animatable
no
JavaScript syntax
object.style.touchAction

Interactive Demo

Syntax

touch-action: auto | none | pan-x | pan-y | pinch-zoom | manipulation 

Values

  • autoAllows the browser to handle all pan and zoom interactions. This is the default value.
  • noneDisables the browser from handling all pan and zoom interactions. This can be useful for custom interactive UI elements.
  • pan-xEnables horizontal panning with a single finger interaction.
  • pan-yEnables vertical panning with a single finger interaction.
  • pinch-zoomEnables pinch-to-zoom gestures.
  • manipulationAllows the browser to handle all pan, zoom, and other touch gestures.

Example

<div class="container touch_manipulation">
<img src="images/sunset.jpg" alt="Sunset">
</div>
touch-action: manipulation;<br>
<div class="container touch_none">
<img src="images/sunset.jpg" alt="Sunset">
</div>
touch-action: none;
<p>Try touching and dragging the image to see the effect of touch-action.</p>
.container {
  width: 200px;
  height: 150px;
  overflow: scroll;
}
.container img {
  width: 400px;
  height: 300px;
}
.touch_manipulation {
  touch-action: manipulation;
}
.touch_none {
  touch-action: none;
}
.map img {
  width: 1200px;
  height: 1200px;
 } 

Browser Support

The following table will show you the current browser support for the CSS touch-action property.

Desktop
Edge Chrome Firefox Opera Safari
1236522313
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
3652249.3337

Last updated by CSSPortal on: 2nd January 2024