🤚 CSS touch-action — Complete Tutorial

The CSS touch-action property controls how the browser handlesdefault touch gestures such as panning, zooming, and double-tap zoom. It is essential for building touch-friendly UI components, sliders, drag-and-drop, drawing canvases, and mobile web apps.

>>“Without touch-action, the browser may intercept touches — preventing your UI from responding correctly.”

Note

✔ Great for mobile web apps
✔ Required for smooth dragging & gesture handling
✔ Prevents conflicts between browser gestures and your JavaScript

📦 Syntax

touch-action syntax

touch-action: auto | none | pan-x | pan-y | pan-left | pan-right | pan-up | pan-down | pinch-zoom | manipulation;

📌 What Does touch-action Control?

  • Panning (scrolling) horizontally or vertically
  • Pinch zoom gestures
  • Double-tap zoom
  • Browser UI behaviors (like navigation gestures)

🎨 Value Breakdown with Examples

1️⃣ touch-action: auto;

Default — the browser handles all gestures normally.

auto

.element {
  touch-action: auto;
}

2️⃣ touch-action: none; (Most restrictive)

Disables all built-in gestures — perfect for custom drag, drawing, or gesture apps.

none

canvas,
.draggable {
  touch-action: none; /* Prevents scroll, pinch, zoom */
}

Note

Frequently used with JavaScript pointer events.

3️⃣ touch-action: pan-x;

Allows horizontal scrolling only. Vertical swipes will NOT scroll the page.

pan-x

.horizontal-scroll {
  touch-action: pan-x;
}

4️⃣ touch-action: pan-y;

Allows vertical scrolling only. Horizontal gestures won't scroll.

pan-y

.vertical-scroll {
  touch-action: pan-y;
}

5️⃣ Directional panning

Directional

.left-pan-only  { touch-action: pan-left; }
.right-pan-only { touch-action: pan-right; }
.up-pan-only    { touch-action: pan-up; }
.down-pan-only  { touch-action: pan-down; }

Useful for specific gesture-based interactions.

6️⃣ touch-action: pinch-zoom;

Allows only pinch-zoom, but disables other gestures like double-tap zoom.

pinch-zoom

img {
  touch-action: pinch-zoom;
}

7️⃣ touch-action: manipulation;

Enables only simple actions like taps — disables double-tap zoom. Improves mobile UI responsiveness.

manipulation

button, a {
  touch-action: manipulation;
}

Note

This improves click speed on mobile devices because it removes the double-tap zoom delay.

📌 Combining Values

Combined example

.map {
  touch-action: pan-x pan-y pinch-zoom;
}

Good for map apps: allow scrolling & zooming but block double-tap zoom.

🧪 Real-World Use Cases

1️⃣ Drag-and-Drop UI (Disable Native Touch)

Drag handles

.drag-item {
  touch-action: none;
}

Prevents the browser from stealing the drag gesture.

2️⃣ Image Gallery Slider (Lock Vertical Scroll)

Horizontal slider

.image-slider {
  touch-action: pan-x;
}

3️⃣ Drawing Apps (Canvas)

Drawing canvas

canvas {
  touch-action: none; /* Prevents page from moving while drawing */
}

4️⃣ Mobile Navigation Gestures

Navigation block

.edge-gesture-area {
  touch-action: none;
}

⚠️ Common Mistakes

  • ❌ Using touch-action on non-touch devices — it simply has no effect
  • ❌ Setting none everywhere and breaking scroll behavior
  • ❌ Using pan-x or pan-y on elements that shouldn’t interfere with scroll
  • ❌ Forgetting that touch-action is required for Pointer Events to work reliably

🔥 Summary

touch-action gives you precise control over how touch gestures behave, making it essential for interactive components, sliders, maps, drawing apps, and mobile web experiences.

>>“Control the gestures — control the experience.”