CSS touch-action Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<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>

CSS

.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;
 }

Result

Editor