Всем привет. Сегодня мы рассмотрим интересное свойство touch-action появившееся в спецификации css3. Данное свойство позволяет определять поведение пользователя при работе с сенсорным экраном, то есть данное свойство прежде всего предназначено для мобильных устройств. Итак, поехали!
Создадим обычный html файл и папку img где у нас будет лежать картинка mask.jpg.
В файле index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Проверка работы свойства touch-action
</title>
</head>
<body>
<style>
img {
touch-action: auto;
}
</style>
<img src="img/mask.jpg" width="2000px" height="2000px">
</body>
</html>Так как работу свойства touch-action мы можем отследить только на сенсорных экранах, загружаем файл index.html и папку img c картинкой на смартфон. И запускаем на устройстве файл index.html в любом браузере. Что мы видим? Ну прежде всего мы видим нашу картинку. Теперь попробуем поскролить, я специально сделал размер картинки 2000x2000 px, поменяем масштаб. Как видите все работает.
Это стандартное поведение на сенсорном экране. И значение auto у свойства touch-action - это значение по умолчанию которое сообщает что нам доступны все действия на сенсорном экране. В принципе его можно не указывать.
Теперь давайте поменяем значение свойства touch-action на none
touch-action: none;и перезальем файл index.html
В результате у нас перестанут работать все события на сенсорном экране, то есть теперь мы не можем скролить и менять масштаб.
С помощью значения none в свойстве touch-action, мы запрещаем любое действие пользователя на сенсорном экране.
Если мы хотим разрешить пользователю только определенные действия можно воспользоваться следующими значениями свойства touch-action.
touch-action: pan-x; - перемещение по оси x
touch-action: pan-y; - перемещение по оси y
touch-action: pinch-zoom; - масштабирование (приближение, удаление)
Есть также еще значения:
manipulation - разрешает сдвиг по осям и масштабирование
double-tap-zoom - приближение по клику по заданной области
cross-slide-x - перемещение поперек элемента
cross-slide-y - перемещение вдоль элемента
В общем используя свойство touch-action мы при необходимости ограничить действия пользователей на сенсорных экранах при работе с нашим сайтом или приложением.
На этом данная статья подошла к концу. Не забывайте оставлять комментарии и задавать вопросы. Ну а я с вами прощаюсь. Желаю успехов и удачи! Пока!
