Управление жестами с помощью свойства touch-action в CSS

Доступно в Baseline в статусе «Widely Available» с 2022-03-19

Свойство CSS touch-action контролирует, как элемент реагирует на жесты на тачскринe — например, прокрутку, масштабирование или две пальцев. Обычно браузеры по умолчанию позволяют выполнять эти жесты, что иногда мешает реализовать собственное поведение. Свойство помогает задать, можно ли™ использовать жесты или нужно их отключить.

Например, чтобы запретить масштабирование и прокрутку при касании элемента, пишем так:

.my-element {
  touch-action: none;
}

Если хотите оставить возможность прокрутки, но отключить масштабирование, используйте:

.my-element {
  touch-action: pan-x pan-y;
}

Это особенно полезно для улучшения взаимодействия с кастомными компонентами, картами или интерактивными элементами, исключая случайные масштабирования или прокрутки на мобильных.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.