Codectionary / Developer documentation / CSS

Declaring Touch Gesture Behaviour

touch-action tells the browser which default touch gestures are permitted in a region.

What it is and why to use it

touch-action tells the browser which default touch gestures are permitted in a region. It is used with pointer-event interactions so the browser and application can decide who handles a gesture. pan-y permits vertical panning while reserving other relevant handling for the interaction.

Common mistakes and limitations

Broad touch-action:none can disable browser gestures users rely on, including zooming in relevant situations. Prefer the narrowest necessary policy. Changing it after a gesture begins does not necessarily change that gesture’s handling.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<div class="gesture">A region prepared for a horizontal pointer interaction. This CSS demo does not implement dragging.</div>

Syntax

touch-action: pan-y;

Examples

Declaring Touch Gesture Behaviour

Run the CSS against the supplied HTML, then experiment with the values.

.gesture { touch-action: pan-y; min-height: 8rem; padding: 1rem; border: 2px solid #2563eb; background: #dbeafe; color: #172b4d; }
  1. The declaration permits browser-managed vertical panning in the region.
  2. An actual horizontal drag feature still needs appropriate pointer-event code and keyboard controls.
  3. Changing the value demonstrates a gesture policy, not an animation. Use this when designing a custom interaction that must coexist with page scrolling.
HTML used by this example
<div class="demo"><div class="gesture">A region prepared for a horizontal pointer interaction. This CSS demo does not implement dragging.</div></div>

Best practices

  • Broad touch-action:none can disable browser gestures users rely on, including zooming in relevant situations. Prefer the narrowest necessary policy. Changing it after a gesture begins does not necessarily change that gesture’s handling.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading