touch-action

< css‎ | properties
Jump to: navigation, search

touch-action

This article is Ready to Use.


W3C Working Draft

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.


Compatibility

There is no data available for topic "css", feature "touch-action". If you think that there should be data available, consider opening an issue.


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.

CSS

canvas#fingerpainter {
  touch-action: none;
}

View live exampleThe 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.

HTML

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



Related specifications

Specification Status Related Changes
Pointer Events Editor's Draft Section 9.1


Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: Article