이 문서는 아직 자원 봉사자들이 한국어로 번역하지 않았습니다. 참여해서 번역을 마치도록 도와 주세요!
English (US)의 문서도 읽어보세요.

The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).

/* 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: pinch-zoom;
touch-action: manipulation;

/* Global values */
touch-action: inherit;
touch-action: initial;
touch-action: unset;
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

By default, panning (scrolling) and pinching gestures are handled exclusively by the browser. An application using Pointer_events will receive a pointercancel event when the browser starts handling a touch gesture. By explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in pointermove and pointerup listeners for the remaining gestures. Applications using Touch_events disable the browser handling of gestures by calling preventDefault(), but should also use touch-action to ensure the browser knows the intent of the application before any event listeners have been invoked.

When a gesture is started, the browser intersects the touch-action values of the touched element and its ancestors, up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, touch-action is typically applied only to top-level elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element's descendants.

After a gesture starts, changes to touch-action will not have any impact on the behavior of the current gesture.

Syntax

The touch-action property may be specified as either:

Values

auto
Enable browser handling of all panning and zooming gestures.
none
Disable browser handling of all panning and zooming gestures.
pan-x
Enable single-finger horizontal panning gestures. May be combined with pan-y, pan-up, pan-down and/or pinch-zoom.
pan-y
Enable single-finger vertical panning gestures. May be combined with pan-x, pan-left, pan-right and/or pinch-zoom.
manipulation
Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. This is an alias for "pan-x pan-y pinch-zoom" (which, for compatibility, is itself still valid).
pan-left, pan-right, pan-up, pan-down
Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling "up" (pan-up) means that the user is dragging their finger downward on the screen surface, and likewise pan-left means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example, "pan-left pan-right" is invalid since "pan-x" is simpler, but "pan-left pan-down" is valid).
pinch-zoom
Enable multi-finger panning and zooming of the page. This may be combined with any of the pan- values.

Formal syntax

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

Examples

The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface.

#map {
  touch-action: none;
}

Another common pattern is an image carousel which uses pointer events to handle horizontal panning, but doesn't want to interfere with vertical scrolling or zooming of the document.

.image-carousel {
  width: 100%;
  height: 150px;
  touch-action: pan-y pinch-zoom;
}

touch-action is also often used to remove the delay of click events caused by support for the double-tap to zoom gesture.

html {
  touch-action: manipulation;
}

Accessibility concerns

A declaration of touch-action: none; may inhibit operating a browser's zooming capabilities. This will prevent people experiencing low vision conditions from being able to read and understand page content.

Specifications

Specification Status Comment
Compatibility Standard
The definition of 'touch-action' in that specification.
Living Standard Added pinch-zoom property value.
Pointer Events - Level 2 Extensions
The definition of 'touch-action' in that specification.
Draft Added pan-left, pan-right, pan-up, pan-down property values.
Pointer Events
The definition of 'touch-action' in that specification.
Recommendation Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
touch-actionChrome Full support 36Edge Full support 12Firefox Full support 52
Notes
Full support 52
Notes
Notes Not applicable to Firefox platforms that support neither pointer nor touch events.
Full support 29
Notes Disabled
Notes Not applicable to Firefox platforms that support neither pointer nor touch events.
Disabled From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 11
Full support 11
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 23Safari Full support 13WebView Android Full support 37Chrome Android Full support 36Firefox Android Full support 52
Full support 52
Full support 29
Disabled
Disabled From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support YesSafari iOS Full support 9.3Samsung Internet Android Full support Yes
pan-x and pan-yChrome Full support 36Edge Full support 12Firefox Full support 52
Notes
Full support 52
Notes
Notes Not applicable to Firefox platforms that support neither pointer nor touch events.
Full support 29
Notes Disabled
Notes Not applicable to Firefox platforms that support neither pointer nor touch events.
Disabled From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 11
Full support 11
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 23Safari Full support 13WebView Android Full support 37Chrome Android Full support 36Firefox Android Full support 52
Full support 52
Full support 29
Disabled
Disabled From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support YesSafari iOS Full support 13Samsung Internet Android Full support Yes
double-tap-zoom
Non-standard
Chrome No support NoEdge Full support 12Firefox No support NoIE Full support 11
Full support 11
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
manipulationChrome Full support 36Edge Full support 12Firefox Full support 52
Notes
Full support 52
Notes
Notes Not applicable to Firefox platforms that support neither pointer nor touch events.
Full support 29
Notes Disabled
Notes Not applicable to Firefox platforms that support neither pointer nor touch events.
Disabled From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 11
Full support 11
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 23Safari Full support 13WebView Android Full support 37Chrome Android Full support 36Firefox Android Full support 52
Full support 52
Full support 29
Disabled
Disabled From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support YesSafari iOS Full support 9.3Samsung Internet Android Full support Yes
noneChrome Full support 36Edge Full support 12Firefox Full support 52
Notes
Full support 52
Notes
Notes Not applicable to Firefox platforms that support neither pointer nor touch events.
Full support 29
Notes Disabled
Notes Not applicable to Firefox platforms that support neither pointer nor touch events.
Disabled From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 11
Full support 11
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 23Safari Full support 13WebView Android Full support 37Chrome Android Full support 36Firefox Android Full support 52
Full support 52
Full support 29
Disabled
Disabled From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support YesSafari iOS Full support 13Samsung Internet Android Full support Yes
pinch-zoomChrome Full support 56Edge Full support 12Firefox No support No
Notes
No support No
Notes
Notes See bug 1285685.
IE Full support 11
Full support 11
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 43Safari Full support 13WebView Android Full support 56Chrome Android Full support 56Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1285685.
Opera Android Full support 43Safari iOS Full support 13Samsung Internet Android Full support 6.0
pan-up, pan-down, pan-left and pan-right
Experimental
Chrome Full support 55Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes See bug 1285685.
IE No support NoOpera Full support 42Safari No support NoWebView Android Full support 55Chrome Android Full support 55Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1285685.
Opera Android Full support 42Safari iOS No support NoSamsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also