touch-action

Summary

Determines whether touch input may trigger default behavior supplied by the user agent, such as panning or zooming.

Overview table

Initial value: auto
Applies to: All elements except non-replaced inline elements, table rows, row groups, table columns, and column groups
Inherited: No
Media: visual
Computed value: Same as specified value
Animatable: No

CSS Object Model Property
:

Percentages: N/A

Syntax

touch-action: auto
touch-action: manipulation
touch-action: none
touch-action: pan-x
touch-action: pan-y

Values

auto: The user agent MAY determine any permitted touch behaviors, such as panning and zooming manipulations of the viewport, for touches that begin on the element.
none: Touches that begin on the element MUST NOT trigger default touch behaviors.
pan-x: The user agent MAY consider touches that begin on the element only for the purposes of horizontally scrolling the element’s nearest ancestor with horizontally scrollable content.
pan-y: The user agent MAY consider touches that begin on the element only for the purposes of vertically scrolling the element’s nearest ancestor with vertically scrollable content.
manipulation: The user agent MAY consider touches that begin on the element only for the purposes of scrolling and continuous zooming.

Examples

You might find the following example within a fingerpainting application to ensure that its canvas doesn’t move when a user touches and manipulates it. When a user touches this canvas and moves his or her finger, no manipulation will occur. DOM events will be sent instead.

canvas#fingerpainter {
  touch-action: none;
}

The application has content that extends horizontally beyond the viewport and the desired behavior is to allow the user to scroll content left and right as desired without the browser moving the entire page.

<div style="touch-action: pan-x;">
    This element receives pointer events when not panning in the horizontal direction.
</div>

View live example

Related specifications

Pointer Events: Editor’s Draft

Attributions

Microsoft Developer Network: Article