CSS touch-action Property
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.
The following table describes the values of this property:
|Enable browser handling of all panning and zooming gestures.
|Disable browser handling of all panning and zooming gestures.
|Enable single-finger horizontal panning gestures. May be combined with pan-y, pan-up, pan-down and/or pinch-zoom.
|Enable single-finger vertical panning gestures. May be combined with pan-x, pan-left, pan-right and/or pinch-zoom.
|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).
|Enable multi-finger panning and zooming of the page. This may be combined with any of the pan- values.
|Sets this property to its default value.
|If specified, the associated element takes the computed value of its parent element animation-delay property.
|Reverts the cascaded value of the property from its current value to the value the property
|Rollback styles to the ones specified in previous cascade layers.
|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