The new touch-action property from the CSS Pointer Events spec can help us (as developers) specify what sort of manipulation (panning, zooming, etc.) should be allowed by a user in a particular region (one or more DOM elements) in a specific web page on a mobile device. It helps specify the sort of interactions or gestures allowed by the user in one or both axis.
I’ve setup a demo that you can play with in your mobile device (full view):
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
See the Pen CSS touch-action by Rishabh (@rishabhp) on CodePen.
Let’s discuss what the different values of the touch-action property does:
- auto – Permit all the touch behaviours.
- none – Won’t trigger any default touch behaviour on the element.
- pan-x – Allow horizontal scrolling/panning of the element’s nearest horizontally scrollable ancestor.
- pan-y – Allow vertical scrolling/panning of the element’s nearest vertically scrollable ancestor.
- manipulation – Only scrolling/panning and zooming allowed. Any other touch behaviour supported by
autowill be disabled.
Since it is a fairly new addition to the spec, feel free to refer to the browser support here.
