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
div.list {
overflow-x: scroll;
}
div.list > div.listEntry {
touch-action: pan-x;
}
