Все прекрасно знают, что на мобильных устройствах щипок двумя пальцами — отвечает за зум (хотя это было ого-го какое изобретение), двойной тап — иногда — тоже. Что можно скроллить, что можно тапать...
Но знали ли вы, что этим поведением можно управлять? Знали ли вы, что браузеры (часто) устанавливают задержку между тапом и его обработкой, примерно в 300 мс? Да-да, всё для обработки двойного тапа.
Так вот, вашему вниманию:
touch-action: manipulation;
...и его друзья!
Его советуют добавлять на кнопки для более быстрой обработки тапа.
Но также!
Отменить зум? Запретить вертикальный или горизонтальный скролл? А может, вообще всё запретить, чтобы заблокировать элемент на экране до определённого момента?
Всё это тоже можно! Да ещё и в разных комбинациях. Например:
#element {
touch-action: pan-right pinch-zoom;
}
...разрешит скроллить направо и зумить, но отключит обработка тапов и вертикального скролла.
Статья на CSS-Tricks по теме: https://css-tricks.com/almanac/properties/t/touch-action/
Демо оттуда же: https://codepen.io/team/css-tricks/pen/PXbPXL
Кстати, на мобильном сафари (а значит, и в хроме на iOS) присутствует офигенный баг!
При указании
touch-action: pan-x; элемент можно скроллить только по вертикали, но пока он движется по инерции, его можно и горизонтально скроллить. После чего скролл успешно в последнем положении блокируется вновь.Apple как обычно, конечно
В общем, полезно.
#css #touch