touch-action

/* Keyword values */
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: pinch-zoom;
touch-action: manipulation;

/* Global values */
touch-action: inherit;
touch-action: initial;
touch-action: revert;
touch-action: revert-layer;
touch-action: unset;

Свойство touch-action может быть задано как:

• Одно из ключевых слов auto, none, manipulation, или
• Одно из ключевых слов pan-x, pan-left, pan-right, и/или одно из ключевых слов pan-y, pan-up, pan-down, плюс необязательно ключевое слово pinch-zoom.

auto

Включить обработку браузером всех жестов перемещения и масштабирования.

none

Отключить обработку браузером всех жестов перемещения и масштабирования.

pan-x

Включить жесты горизонтального перемещения одним пальцем. Может быть объединён с pan-y, pan-up, pan-down и/или pinch-zoom.

pan-y

Включить жесты вертикального перемещения одним пальцем. Может быть объединён с pan-x, pan-left, pan-right и/или pinch-zoom.

manipulation

Включить жесты перемещения и масштабирования, но отключить дополнительные нестандартные жесты, такие как двойное касание для масштабирования. Отключение двойного касания для масштабирования устраняет необходимость для браузеров задерживать генерацию событий click при касании экрана пользователем. Это псевдоним для "pan-x pan-y pinch-zoom" (который, для совместимости, всё ещё является допустимым).

pan-left, pan-right, pan-up, pan-down

Включить жесты перемещения одним пальцем, которые начинаются прокруткой в заданном направлении(ях). После начала прокрутки направление может быть изменено. Обратите внимание, что прокрутка "вверх" (pan-up) означает, что пользователь проводит пальцем вниз по поверхности экрана, а также pan-left означает, что пользователь проводит пальцем вправо. Несколько направлений могут быть объединены, за исключением случаев, когда существует более простое представление (например, "pan-left pan-right" недействительно, так как "pan-x" проще, но "pan-left pan-down" допустимо).

pinch-zoom

Включить многопальцевые жесты перемещения и масштабирования страницы. Может быть объединён с любыми значениями pan-.

Объявление touch-action: none; может препятствовать использованию функций масштабирования браузера. Это помешает людям с нарушениями зрения читать и понимать содержимое страницы.

• MDN Понимание WCAG, объяснения к руководству 1.4
• Понимание критерия успеха 1.4.4 | Понимание WCAG 2.0

touch-action = 
  auto                                                |
  none                                                |
  [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ]  |
  manipulation                                        

Наиболее распространённое использование — отключение всех жестов на элементе (и его непрокручиваемых потомков), предоставляющем собственное поведение перетаскивания и масштабирования — например, карта или игровое поле.

HTML

<div id="map"></div>

CSS

#map {
  height: 150vh;
  width: 70vw;
  background: linear-gradient(blue, green);
  touch-action: none;
}

Результат

• pointer-events
• События указателя
• Блог WebKit Более отзывчивые нажатия на iOS
• Блог Google Developers Ускорение прокрутки по касанию по умолчанию
• Скролл Снап