touch-action
The touch-action property determines if and how a user can interact with an element on screen via touch input using the browser’s default features. For example, panning or zooming.
Touch events are a Web API that allow the browser to interpret finger or stylus interactions on touch screens or trackpads. We usually handle touch events using JavaScript, but touch-action allows us to inform the browser of the application’s intent before any event listeners are triggered.
The result of an element being touched depends on the value of the touch-action property and the default touch behaviors on the element and its ancestors. Developers can selectively disable some default touch behaviors, preventing them from being dispatched at all if they are not required.
The touch-action property only applies to elements that support both the CSS width and height properties. For elements that don’t have explicit dimensions, like the inline span element, we can set their display property to one that supports width and height, like for example block.
Official Syntax
-
Syntax:
touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] ] | manipulation
- Initial: auto
- Applies To: all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups
- Animatable: No
Values
- auto
- This is the initial value. The browser’s user agent may determine the permitted touch behavior that begins on the element.
- manipulation
-
Touch-driven panning and pinch-zooming are permitted on the element. This can be considered a shorthand for
pan-x pan-y pinch-zoom. Additional non-standard gestures like double-tap to zoom are not permitted. - none
- No default touch behaviors are permitted on the element.
- pan-x
- Touch-driven panning is permitted along the x-axis. Can be combined with pan-y, pan-up, pan-down and pinch-zoom. Refer to Official Syntax.
- pan-y
- Touch-driven panning is permitted along the y-axis. Can be combined with pan-x, pan-left, pan-right and pinch-zoom. Refer to Official Syntax.
- pan-left
- Touch-driven panning is permitted only if the action starts by panning to the left. This means the user is dragging their finger to the right. Once scrolling has started, the direction can then be reversed.
- pan-right
- Touch-driven panning is permitted only if the action starts by panning to the right. This means the user is dragging their finger to the left. Once scrolling has started, the direction can then be reversed.
- pan-up
- Touch-driven panning is permitted only if the action starts by panning up. This means the user is dragging their finger downwards. Once scrolling has started, the direction can then be reversed.
- pan-down
- Touch-driven panning is permitted only if the action starts by panning down. This means the user is dragging their finger upwards. Once scrolling has started, the direction can then be reversed.
- pinch-zoom
- Touch-driven zooming with multiple-fingers is permitted. Can be combined with pan-x, pan-left or pan-right; and pan-y pan-up or pan-down. Refer to Official Syntax.
Examples
Browsers come with default touch gestures and sometimes you may have an element that has its own custom zooming or dragging functionality. We can use the none value to disable the browser’s default behavior.
.element {
touch-action: none;
}
We can also use touch-action to remove the 350ms delay before single taps activate links or buttons. This delay is a default browser behavior to make sure the user really intended to tap only once. But this also makes the site feel less responsive. By setting the touch-action value to manipulation, any touches that begin on the element will only trigger pan or zoom. Double-tap gestures are disregarded and single taps will be dispatched without delay.
.element {
touch-action: manipulation;
}
Another use case for touch-action could be for the customization of overscroll behavior, like the commonly seen pull-to-refresh effect. We can set the container’s touch-action property to pan-x pan-down when the scroll position is 0, and pan-x pan-y when scroll position is any other value. This means if the user drags their finger downwards when the scroll position of the container is all the way at the top, the pointer event handlers will kick in instead.
Live Demo
As this property is specific to touch input, it is recommended you try it out on a touch-enabled device.
View this demo on the Codrops PlaygroundBrowser Support
CSS touch-action property
touch-action is a CSS property that controls filtering of gesture events, providing developers with a declarative mechanism to selectively disable touch scrolling (in one or both axes) or double-tap-zooming.
W3C Recommendation
Supported from the following versions:
Desktop
- 36
- 57
- 11
- 23
- No
Mobile / Tablet
- 9.3
- 66
- No
- 66
- 60