CSS touch-action Property

This property tells the browser which touch gestures (like scrolling or zooming) it should handle and which it should ignore.

selector { touch-action: auto | none | pan-x | pan-y | manipulation; }
auto Allows the browser to handle all default touch interactions like panning and zooming.
none Disables all browser-led touch interactions, leaving gesture handling entirely to your own scripts.
pan-x Enables horizontal panning but disables vertical scrolling and other gestures.
pan-y Enables vertical panning but disables horizontal scrolling and other gestures.
pan-left Enables gestures that start by moving the finger to the left.
pan-right Enables gestures that start by moving the finger to the right.
pan-up Enables gestures that start by moving the finger upwards.
pan-down Enables gestures that start by moving the finger downwards.
pinch-zoom Allows the user to zoom in and out of the page using multiple fingers.
manipulation Allows panning and pinch-zooming but disables non-standard gestures like double-tap to zoom.

Code Examples

This basic example shows how to prevent any browser touch behavior on a specific area, ideal for canvas or signature components.

<style>
.drawing-area {
  width: 100%;
  height: 400px;
  background-color: #f0f0f0;
  touch-action: none;
  border: 2px solid #333333;
}
</style>
<div class="drawing-area">
  Touch here to draw without the page scrolling.
</div>

This advanced example uses pan-y to allow vertical page scrolling while the user interacts with a horizontal carousel, combined with Pointer Events in JavaScript.

<style>
.carousel-track {
  display: flex;
  overflow-x: auto;
  touch-action: pan-y;
  background-color: #222222;
  padding: 20px;
}
.card {
  min-width: 200px;
  height: 250px;
  background-color: #0077ff;
  margin-right: 10px;
}
</style>
<div class="carousel-track" id="myTrack">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
<script>
const track = document.getElementById("myTrack");
track.addEventListener("pointerdown", (e) => {
  track.style.backgroundColor = "#ffcc00";
});
track.addEventListener("pointerup", (e) => {
  track.style.backgroundColor = "#222222";
});
</script>

Pro Tip

If you are building a drawing application on a canvas, use "touch-action: none" on the canvas element itself. This is much cleaner and more performant than trying to call e.preventDefault() on every touchmove event in JavaScript, which can lead to janky performance and console warnings in modern browsers.

Deep Dive

Think of touch-action as a traffic cop for your fingers. By default, the browser is the boss—it decides when to scroll the page or zoom in. If you are building something like a signature pad or a game, you don't want the whole page sliding around while the user is trying to draw. Setting this to "none" tells the browser to back off and let your JavaScript handle the input. It effectively prevents the default browser behavior for touch inputs on a specific element without stopping the events from firing in your code.

Best Practices

Use "manipulation" for links and buttons to eliminate the 300ms click delay on older mobile browsers while still allowing users to zoom. If you have a horizontal image slider, use "pan-y" so the user can still scroll down the page naturally while interacting with your slider. Only use "none" when you have written custom logic to handle the interaction, otherwise, you might make the element feel broken or unresponsive to the user.

Common Pitfalls

A common mistake is applying "touch-action: none" to a large container and forgetting that it will prevent the user from scrolling the entire page if their finger starts on that element. Also, remember that this property does not affect mouse interactions; it is strictly for touch-enabled devices. It is not a replacement for preventDefault() in all cases, but it is much more performant because the browser knows the intent before the script even runs.

Accessibility

Never use "none" or disable "pinch-zoom" unless it is absolutely necessary for the functionality of a custom interface. Blocking a user's ability to zoom is a major accessibility barrier for people with visual impairments. If you must disable certain gestures, ensure your application provides an alternative way to achieve the same result, such as on-screen zoom buttons or clear navigation controls.

Dev Data Table: touch-action property

default auto
animatable no
inherited no
experimental no
year_intro 2011
year_standard 2015
js_syntax_1 element.style.touchAction = "none";
js_syntax_2 element.style.setProperty("touch-action", "pan-y");
js_note When using this in JavaScript, ensure you use the camelCase property name touchAction or the setProperty method to avoid syntax errors.
browsers { "Chrome": 36, "Edge": 12, "Firefox": 52, "Safari": 13, "Opera": 23, "Chrome Android": 36, "Safari on iOS": 13, "Samsung Internet": 3, "Opera Mobile": 24 }
results render here...