Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください!

Summary

The touch-action CSS property specifies whether, and in what ways, a given region can be manipulated by the user (for instance, by panning or zooming).

Initial valueauto
Applies toall elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

/* Keyword values */
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: manipulation;

/* Global values */
touch-action: inherit;
touch-action: initial;
touch-action: unset;

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
Use this value to disable all of the default behaviors and allow your content to handle all touch input (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. Any additional behaviors supported by auto are out of scope for this specification.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

The following property values have not yet been formally standardized. They are specified in the Pointer Events – Level 2 Editor's Draft specification and not in Pointer Events Recommendation. These property values are not widely implemented.

pan-left, pan-right
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-up, pan-down
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.

Formal syntax

auto | none | [[ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ]] | manipulation

Example

.list {
  width: 200px;
  height: 50px;
  overflow-x: scroll;
}

.list > .entry {
  touch-action: pan-x;
}

Specifications

Specification Status Comment
Pointer Events – Level 2
The definition of 'touch-action' in that specification.
Editor's Draft Added property values pan-left, pan-right, pan-up, pan-down
Pointer Events
The definition of 'touch-action' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 36.0 No support[1] 10.0-ms[2]
11.0
26.0 No support[4]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 37.0 No support[1] (Yes) ? 9.1 [3]

[1] Starting in Firefox 29, this property is implemented in Firefox, but is hidden behind the layout.css.touch_action.enabled preference. Starting in Firefox Nighly 50, it is enabled by default when running in nightly builds only; no decision has been made on when it will make its way along toward release.

[2] IE10+ additionally supports the non-standard values pinch-zoom, double-tap-zoom, cross-slide-x and cross-slide-y.

[3] Only supports the manipulation and auto values in iOS.

[4] See WebKit bug 133112.

See also

ドキュメントのタグと貢献者

 このページの貢献者: Sheppy, bethge, Sebastianz, teoli, yisibl, mkato, AFBarstow, cvrebert, fscholz, Syle91, jithin0001
 最終更新者: Sheppy,