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: revert; touch-action: revert-layer; touch-action: unset;
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
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.
Note: After a gesture starts, changes to
touch-action will not have any impact on the behavior of the current gesture.