This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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