CSS touch-action Property

❮ Previous Reference Next ❯


div {
  height: 300px;
  width: 300px;
  background: #1A73E8;
  touch-action: none;


The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user.

A declaration of touch-action: none; may inhibit operating a browser's zooming capabilities. This will prevent people experiencing low vision conditions from being able to read and understand page content.

Note: By default, panning (scrolling) and pinching gestures are handled exclusively by the browser.

Default value:auto
JavaScript syntax:

Standard Syntax

touch-action: auto|none|pan-x|pan-y|pinch-zoom|manipulation|initial|inherit|revert|revert-layer|unset;

Browser Support


Property Values

The following table describes the values of this property:

Value Description
auto Enable browser handling of all panning and zooming gestures.
none Disable browser handling of all panning and zooming gestures.
pan-x Enable single-finger horizontal panning gestures. May be combined with pan-y, pan-up, pan-down and/or pinch-zoom.
pan-y Enable single-finger vertical panning gestures. May be combined with pan-x, pan-left, pan-right and/or pinch-zoom.
manipulation 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 click events when the user taps the screen. This is an alias for "pan-x pan-y pinch-zoom" (which, for compatibility, is itself still valid).
pan-left, pan-right, pan-up, pan-down 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" (pan-up) means that the user is dragging their finger downward on the screen surface, and likewise pan-left means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, "pan-left pan-right" is invalid since "pan-x" is simpler, but "pan-left pan-down" is valid).
pinch-zoom Enable multi-finger panning and zooming of the page. This may be combined with any of the pan- values.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  touch-action: auto;
❮ Previous Reference Next ❯