Prevent Touch Panning and Zooming on Mobile Web Pages with CSS touch-action Property

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):

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 auto will be disabled.

Since it is a fairly new addition to the spec, feel free to refer to the browser support here.

Advertisement

Author: Rishabh

Rishabh is a full stack web and mobile developer from India. Follow me on Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *


*