От автора: свойство touch-action CSS определяет, может ли пользователь взаимодействовать с элементом на экране с помощью касаний, используя стандартные возможности браузера, а также как это будет происходить. Например, панорамирование и зум.
События касаний – это Web API, позволяющее браузеру интерпретировать действия пальцами или стилусом на сенсорном экране или трекпаде. Обычно события касаний мы обрабатываем через JS, однако touch-action позволяет информировать браузер о намерениях приложения еще до срабатывания обработчиков событий.
Результат касания элемента зависит от значения свойства touch-action и стандартных настроек касания элемента и его предков. Разработчики могут выборочно отключать стандартное поведение при касании экрана, предотвращая тем самым отправку, если поведение не требуется.
Свойство touch-action применяется только к элементам, которые поддерживают оба CSS-свойства width и height. Элементам без явно прописанных размеров типа span можно задать свойство display в значение, поддерживающее width и height, например, block.
Синтаксис
Синтаксис: touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] ] | manipulation
Изначально: auto
Применяется к: всем элементам кроме: незаменяемых инлайновых элементов, строк таблиц, групп строк, колонок таблиц и групп колонок
Анимируется: нет
Значения
auto. Значение по умолчанию. Браузер пользователя может определить разрешенное поведение при касании элемента.
manipulation. На элементе разрешено панорамирование и зум пальцами. Можно считать сокращением для pan-x pan-y pinch-zoom. Дополнительные нестандартные жесты типа двойного тапа запрещены.
none. На элементе запрещены стандартные поведения при касании.
pan-x. Разрешено панорамирование пальцами по оси Х. Можно совместить с pan-y, pan-up, pan-down и зумом пальцами. См. официальный синтаксис.
pan-y. Разрешено панорамирование пальцами по оси Y. Можно совместить с pan-x, pan-up, pan-down и зумом пальцами. См. официальный синтаксис.
pan-left. Панорамирование пальцами разрешено только, если действие начинается с панорамирования влево. То есть пользователь перемещает палец вправо. После начала прокрутки направление можно изменить на противоположное.
pan-right. Панорамирование пальцами разрешено только, если действие начинается с панорамирования вправо. То есть пользователь перемещает палец влево. После начала прокрутки направление можно изменить на противоположное.
pan-up. Панорамирование пальцами разрешено только, если действие начинается с панорамирования вверх. То есть пользователь перемещает палец вниз. После начала прокрутки направление можно изменить на противоположное.
pan-down. Панорамирование пальцами разрешено только, если действие начинается с панорамирования вниз. То есть пользователь перемещает палец вверх. После начала прокрутки направление можно изменить на противоположное.
pinch-zoom. Разрешен зум несколькими пальцами. Можно совместить с pan-x, pan-left, pan-right, pan-y, pan-up, pan-down. См. официальный синтаксис.
Примеры
По умолчанию в браузере заданы жесты касаний, но иногда бывают элементы со своим кастомным функционалом зума или перетаскивания. Отключить стандартное поведение браузера можно с помощью значения none.
1 2 3 |
.element { touch-action: none; } |
Также с помощью touch-action можно удалить задержку в 350ms перед активацией единичными тапами ссылок и кнопок. Задержка задана в браузере по умолчанию, чтобы проверить, что пользователь действительно тапнул всего один раз. Однако такое поведение делает сайт менее адаптивным. Если задать touch-action в manipulation, то любое касание элемента будет запускать только панорамирование или зум. Жесты двойного нажатия будут игнорироваться, одиночные нажатия будут выполняться без задержки.
1 2 3 |
.element { touch-action: manipulation; } |
Другой вариант использования touch-action – настройка поведения overscroll (частое поведение типа «потяни, чтобы обновить»). На контейнере можно задать свойство touch-action в pan-x pan-down, когда позиция скрола равна 0, и pan-x pan-y, когда позиция скрола равна любому другому значению. Это значит, что если пользователь потянет экран пальцем вниз, когда позиция скрола контейнера находится в самом верху, то сработает обработчик события pointer.
Демо
Свойство используется для сенсорных экранов, рекомендуется проверять его на устройствах с сенсорным экраном.
Поддержка в браузерах
Свойство touch-action
Свойство touch-action контролирует события фильтрации жестов и дает разработчикам декларативный механизм для выборочного отключения сенсорной прокрутки (по одной или обеим осям) и масштабирования по двойному тапу.
Поддерживается со следующих версий:
Автор: Hui Jing Chen
Источник: //tympanus.net/
Редакция: Команда webformyself.