touch-action
The touch-action CSS property sets whether an element on a touch screen can be panned or pinched to zoom.
Overview
The touch-action CSS property sets whether an element on a touch screen can be panned or pinched to zoom.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 36 | 12 | 52 | 13 | 36 | 9.3 | |
manipulation | 36 | 12 | 52 | 13 | 36 | 9.3 |
none | 36 | 12 | 52 | 13 | 36 | 13 |
pan-down | 55 | 79 | | | 55 | |
pan-left | 55 | 79 | | | 55 | |
pan-right | 55 | 79 | | | 55 | |
pan-up | 55 | 79 | | | 55 | |
pan-x | 36 | 12 | 52 | 13 | 36 | 13 |
pan-y | 36 | 12 | 52 | 13 | 36 | 13 |
pinch-zoom | 56 | 12 | 85 | 13 | 56 | 13 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Not applicable to Firefox platforms that support neither pointer nor touch events.
Notes 1 item(s)
Implementation note
- Not applicable to Firefox platforms that support neither pointer nor touch events.
Notes 1 item(s)
Implementation note
- Not applicable to Firefox platforms that support neither pointer nor touch events.
Notes 1 item(s)
Implementation note
- Not applicable to Firefox platforms that support neither pointer nor touch events.
Notes 1 item(s)
Implementation note
- Not applicable to Firefox platforms that support neither pointer nor touch events.
Notes 1 item(s)
Implementation note
- Not applicable to Firefox platforms that support neither pointer nor touch events.
Syntax
CSS
/* Disable default scrolling in the custom swipe UI */
.swipe-area {
touch-action: none;
}
/* Disable all actions except double-tap zoom */
.button {
touch-action: manipulation;
}
/* Allow horizontal scrolling only */
.horizontal-scroll {
touch-action: pan-x;
}Live demo
Use cases
Using touch-action
The touch-action CSS property sets whether an element on a touch screen can be panned or pinched to zoom.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features