#фишка дня

Все прекрасно знают, что на мобильных устройствах щипок двумя пальцами — отвечает за зум (хотя это было ого-го какое изобретение), двойной тап — иногда — тоже. Что можно скроллить, что можно тапать...

Но знали ли вы, что этим поведением можно управлять? Знали ли вы, что браузеры (часто) устанавливают задержку между тапом и его обработкой, примерно в 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