-ms-touch-action property

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

This property is read/write.

Syntax

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

Property values

One of the following values, a combination of the gesture 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.

CSS information

Remarks

When a user touches an element, that element's -ms-touch-action property determines the default touch behaviors permitted for that contact, like panning or zooming.

The touch behavior is then performed on the nearest ancestor element that is capable of that behavior, unless an intermediate ancestor element specifies that the behavior is not permitted.

If a default touch behavior is not invoked, Document Object Model (DOM) events will be fired for that contact instead (see Pointer and gesture events).

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 {
  -ms-touch-action: none;
}

The following example builds a list that pans in the x-direction but allows dragging or rearranging if the user pulls an item in the y-direction (similar to the Windows 8 Start screen) When the user touches a listEntry and moves his or her finger in the x-direction, the list will pan. If the user instead moves his or her finger in the y-direction, no pan will occur. DOM events will be sent instead.

div.list {
  overflow-x: scroll;
}

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

See also

CSSStyleDeclaration

Windows Store apps using JavaScript Samples: HTML scrolling, panning and zooming sample

Internet Explorer Samples: Scrolling, panning, and zooming with touch input

Build date: 11/29/2012