Touch Action Options

The touch-action CSS property allows a developer to restrict how a user can interact with an element which is especially helpful to prevent events being dispatched when it's not necessary.

Before version 55, Chrome supported pan-x and pan-y which restrict elements to scrolling in one direction.

The video below shows an example of an element without a touch-action defined (left), as well as pan-x and pan-y (middle and right).

The CSS for the the middle and right hand screen-casts being:

.pan-x {
  touch-action: pan-x;
}

.pan-y {
  touch-action: pan-y;
}

In Chrome 55, pan-left, pan-right, pan-up and pan-down were added. These properties have a subtle but important difference in behavior.

These properties force the user to start gestures in one direction before the element will respond. This is similar to the "pull-to-refresh" gesture which only responds when the user gestures downwards on the screen.

The following video demonstrates pan-right and pan-down which require gestures to start from right to left and bottom to top respectively. Once the gesture has started, you can actually pan back and forth. It's only the initial direction that is affected.

While the video demonstrates this behavior, you might find it easier to try yourself which you can by checking out the sample.

The CSS for this demo is:

.pan-right {
  touch-action: pan-right;
}

.pan-down {
  touch-action: pan-down;
}

The last thing that's happening in the world of touch-action is the pinch-zoom property. This is a new property in Chrome 55, behind a flag, that can be used with any of the pan options (i.e. pan-x, pan-y, pan-left, pan-right, pan-down, pan-up).

If you pinch on a website it'll generally zoom in on the pages content. Defining a touch-action will prevent this behavior, but adding pinch-zoom will re-enable this behavior.

This video shows the difference between touch-action: pan-x and touch-action: pan-x pinch-zoom;

All of these properties should simplify some of the logic that would otherwise need to implemented by developers using pointer-events.