touch-action property CSS Reference

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.

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

div.list {
  overflow-x: scroll;
}
div.list > div.listEntry {
  touch-action: pan-x;
}