CSS touch-action Property
Example
div {
height: 300px;
width: 300px;
background: #1A73E8;
touch-action: none;
}Meaning:
The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user.
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.
Note: By default, panning (scrolling) and pinching gestures are handled exclusively by the browser.
| Default value: | auto |
| Inherited: | No |
| Animatable: | No |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
touch-action: auto|none|pan-x|pan-y|pinch-zoom|manipulation|initial|inherit|revert|revert-layer|unset;Browser Support
Status
Property Values
The following table describes the values of this property:
| Value | Description |
|---|---|
| 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. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
touch-action: auto;
}