Свойство CSS touch-action позволяет разработчику ограничить способ взаимодействия пользователя с элементом, что особенно полезно для предотвращения отправки событий, когда в этом нет необходимости.
До версии 55 Chrome поддерживал pan-x и pan-y , которые ограничивали прокрутку элементов в одном направлении.
На видео ниже показан пример элемента без определенного сенсорного действия (слева), а также панорамирования по x и панорамирования по y (в центре и справа).
CSS для среднего и правого скриншотов:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
В Chrome 55 были добавлены pan-left , pan-right , pan-up и pan-down . Эти свойства имеют тонкое, но важное различие в поведении.
Эти свойства заставляют пользователя начать жесты в одном направлении, прежде чем элемент ответит. Это похоже на жест «потянуть, чтобы обновить», который реагирует только тогда, когда пользователь проводит пальцем вниз по экрану.
В следующем видео показаны pan-right и pan-down , для которых жесты должны начинаться справа налево и снизу вверх соответственно. Как только жест начался, вы можете перемещаться вперед и назад. Это влияет только на начальное направление.
Хотя видео демонстрирует такое поведение, возможно, вам будет проще попробовать это самостоятельно, просмотрев образец .
CSS для этой демонстрации:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
Последнее, что происходит в мире сенсорного управления, — это свойство pinch-zoom . Это новое свойство в Chrome 55, расположенное за флагом, которое можно использовать с любыми параметрами панорамирования (например, pan-x , pan-y , pan-left , pan-right , pan-down , pan-up ).
Если вы зажмете веб-сайт, он обычно увеличит масштаб содержимого страниц. Определение touch-action предотвратит такое поведение, но добавление масштабирования снова включит это поведение.
В этом видео показана разница между touch-action: pan-x и touch-action: pan-x pinch-zoom ;
Все эти свойства должны упростить некоторую часть логики, которую в противном случае пришлось бы реализовывать разработчикам с помощью pointer-events .