touch-action
Tells the browser how to handle touch interactions (like swiping or pinching) on a specific element. This is vital for complex mobile UIs, such as custom maps or sliders, where you want to disable default browser scrolling to handle it yourself.
It is documented as part of the Pointer Events specification.
Syntax
/* Usage Example */
.map-canvas {
/* Disables the browser's default touch behaviors so the app can handle custom dragging/zooming */
touch-action: none;
}
/* Syntax */
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;touch-action Browser support
Widely available
Since
2019 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2019.
36+
52+
13+
12+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more