---
title: touch-action
slug: Web/CSS/touch-action
translation_of: Web/CSS/touch-action
---
<div>{{CSSRef}}</div>

<p>A propriedade <strong><code>touch-action</code></strong> é uma especificação CSS , e forma, uma determinada região que pode ser manipulada pelo usuário através de uma tela sensível ao toque (por exemplo, recursos panorâmicos ou de zoom incorporados no navegador).</p>

<pre class="brush:css no-line-numbers">/* Keyword values */
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;

/* Global values */
touch-action: inherit;
touch-action: initial;
touch-action: unset;
</pre>

<p>{{cssinfo}}</p>

<p>By default, panning (scrolling) and pinching gestures are handled exclusively by the browser. An application using {{domxref("Pointer_events")}} will receive a <code><a href="/Web/Events/pointercancel">pointercancel</a></code> 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 <code><a href="Web/Events/pointermove">pointermove</a></code> and <code><a href="/Web/Events/pointerup">pointerup</a></code> listeners for the remaining gestures. Applications using {{domxref("Touch_events")}} disable the browser handling of gestures by calling {{domxref("Event.preventDefault","preventDefault()")}}, but should also use <strong>touch-action</strong> to ensure the browser knows the intent of the application before any event listeners have been invoked.</p>

<p>When a gesture is started, the browser intersects the <strong>touch-action</strong> values of the touched element and all its ancestors up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, <strong>touch-action</strong> is typically applied only to individual elements which have some custom behavior, without needing to specify <strong>touch-action</strong> explicitly on any of that element's descendants. After a gesture has started, changes to <strong>touch-action</strong> values will not have any impact on the behavior of the current gesture.</p>

<h2 id="Syntax">Syntax</h2>

<p>The <code>touch-action</code> property may be specified as either:</p>

<ul>
 <li>any one of the keywords <code><a href="#auto">auto</a></code>, <code><a href="#none">none</a></code>, <code><a href="#manipulation">manipulation</a></code>, <em>or</em></li>
 <li>one of the keywords <code><a href="#pan-x">pan-x</a></code>, <code><a href="#pan-keywords">pan-left</a></code>, <code><a href="#pan-keywords">pan-right</a></code>, and/or one of the keywords <code><a href="#pan-y">pan-y</a></code>, <code><a href="#pan-keywords">pan-up</a></code>, <code><a href="#pan-keywords">pan-down</a></code>, plus optionally the keyword <code><a href="#">pinch-zoom</a></code>.</li>
</ul>

<h3 id="Values">Values</h3>

<dl>
 <dt><a id="auto" name="auto"><code>auto</code></a></dt>
 <dd>Enable browser handling of all panning and zooming gestures.</dd>
 <dt><a id="none" name="none"><code>none</code></a></dt>
 <dd>Disable browser handling of all panning and zooming gestures.</dd>
 <dt><a id="pan-x" name="pan-x"><code>pan-x</code></a></dt>
 <dd>Enable single-finger horizontal panning gestures. May be combined with <strong>pan-y, pan-up,</strong> <strong>pan-down </strong>and/or <strong>pinch-zoom</strong>.</dd>
 <dt><a id="pan-y" name="pan-y"><code>pan-y</code></a></dt>
 <dd>Enable single-finger vertical panning gestures. May be combined with <strong>pan-x, pan-left, </strong><strong>pan-right</strong> and/or <strong>pinch-zoom</strong>.</dd>
 <dt><a id="manipulation" name="manipulation"><code>manipulation</code></a></dt>
 <dd>Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of <strong>click</strong> events when the user taps the screen. This is an alias for "<strong>pan-x pan-y pinch-zoom</strong>" (which, for compatibility, is itself still valid).</dd>
</dl>

<dl>
 <dt><a id="pan-keywords" name="pan-keywords"><code>pan-left</code>, <code>pan-right,pan-up,pan-down</code> {{experimental_inline}}</a></dt>
 <dd>Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling "up" (<strong>pan-up</strong>) means that the user is dragging their finger downward on the screen surface, and likewise <strong>pan-left</strong> means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, <strong>"</strong><strong>pan-left pan-right</strong>" is invalid since "<strong>pan-x</strong>" is simpler, but "<strong>pan-left pan-down</strong>" is valid).</dd>
 <dt><a id="pinch-zoom" name="pinch-zoom"><code>pinch-zoom</code></a></dt>
 <dd>Enable multi-finger panning and zooming of the page. This may be combined with any of the <strong>pan-</strong> values.</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

{{csssyntax}}

<h2 id="Examples">Examples</h2>

<p>The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface. </p>

<pre class="brush: css">#map {
  touch-action: none;
}
</pre>

<p>Another common pattern is that of an image carousel which uses pointer events to handle horizontal panning, but doesn't want to interfere with vertical scrolling or zooming of the document.</p>

<pre class="brush: css">.image-carousel {
  width: 100%;
  height: 150px;
  touch-action: pan-y pinch-zoom;
}
</pre>

<p><strong>touch-action </strong>is also often used to completely disable the delay of <strong>click </strong>events caused by support for the<strong> </strong>double-tap to zoom gesture.</p>

<pre class="brush: css">html {
  touch-action: manipulation;
}
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Compat', '#touch-action', 'touch-action')}}</td>
   <td>{{Spec2('Compat')}}</td>
   <td>Added <code>pinch-zoom</code> property value.</td>
  </tr>
  <tr>
   <td>{{SpecName('Pointer Events 2', '#the-touch-action-css-property', 'touch-action')}}</td>
   <td>{{Spec2('Pointer Events 2')}}</td>
   <td>Added <code>pan-left</code>, <code>pan-right</code>, <code>pan-up</code>, <code>pan-down</code> property values.</td>
  </tr>
  <tr>
   <td>{{SpecName('Pointer Events', '#the-touch-action-css-property', 'touch-action')}}</td>
   <td>{{Spec2('Pointer Events')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{compat("css.properties.touch-action")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{domxref("Pointer_events","Pointer Events")}}</li>
 <li>WebKit Blog <a href="https://webkit.org/blog/5610/more-responsive-tapping-on-ios/" rel="bookmark" title="Permanent Link: More Responsive Tapping on iOS">More Responsive Tapping on iOS</a></li>
 <li>Google Developers Blog <a href="https://developers.google.com/web/updates/2017/01/scrolling-intervention">Making touch scrolling fast by default</a></li>
</ul>