Свойство CSS `touch-action`

Свойство touch-action CSS задаёт, как область элемента может изменяться пользователем сенсорного экрана (например, с помощью встроенной в браузер функции масштабирования).

По умолчанию обработку жестов панорамирования (прокрутки) и масштабирования щипком эксклюзивно выполняет браузер. Приложение, использующее события указателя, получит событие pointercancel, когда браузер начнёт обрабатывать сенсорный жест. Явно указав, какие жесты должен обрабатывать браузер, приложение может реализовать собственное поведение в обработчиках pointermove и pointerup для остальных жестов. Приложения, использующие сенсорные события, отключают обработку жестов браузером, вызывая preventDefault(), но им также следует использовать touch-action, чтобы браузер узнал о намерениях приложения до вызова обработчиков событий.

При начале жеста браузер вычисляет пересечение значений touch-action у затронутого элемента и его предков вплоть до элемента, обрабатывающего этот жест (то есть первого содержащего элемента с прокруткой). На практике это означает, что touch-action обычно применяется только к элементам верхнего уровня с некоторым пользовательским поведением, и нет необходимости явно задавать 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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)

Формальное определение

Формальный синтаксис

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: Ускорение сенсорной прокрутки по умолчанию
• Привязка прокрутки