touch-action property

Image Tutorials

Definition and Usage

Specifies whether and how a given region can be manipulated by the user (for instance, by panning or zooming).

Note As of Internet Explorer 11, the Microsoft vendor prefixed version of this event (-ms-touch-action) is no longer supported and may be removed in a future release. Instead, use the non-prefixed name touch-action, which is better for standards compliance and future compatibility.

This property is read/write.

Applies To All elements
Media interactive
Inherited no
Initial Value auto

Syntax

touch-action: auto | none | [ [ [ pan-x || pan-y || pinch-zoom ? ] | manipulation ] || double-tap-zoom ? ]

Values

auto
Initial value. Indicates the Windows Store app using JavaScript will determine the permitted touch behaviors for the element.
none
The element permits no default touch behaviors.
pan-x
The element permits touch-driven panning on the horizontal axis. The touch pan is performed on the nearest ancestor with horizontally scrollable content.
pan-y
The element permits touch-driven panning on the vertical axis. The touch pan is performed on the nearest ancestor with vertically scrollable content.
pinch-zoom
The element permits pinch-zooming. The pinch-zoom is performed on the nearest ancestor with zoomable content. For more information about specifying content as zoomable, see the -ms-content-zooming property.
manipulation
The element permits touch-driven panning and pinch-zooming. This is the shorthand equivalent of “pan-x pan-y pinch-zoom”.
double-tap-zoom
The element permits double-tap-zooming. The double-tap-zoom is performed on the full page. Double-tap-zoom is not available in Windows Store apps using JavaScript.
cross-slide-x
The element permits cross-sliding along the horizontal axis.
cross-slide-y
The element permits cross-sliding along the vertical axis.

Examples

1 div.list {
2   overflow-x: scroll;
3 }
4 div.list > div.listEntry {
5   touch-action: pan-x;
6 }

Rate article