Властивість touch-action CSS

370

Від автора: властивість 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.

.element {
touch-action: none;
}

Також за допомогою touch-action можна видалити затримку в 350ms перед активацією одиничними тапамі посилань і кнопок. Затримка задана в браузері за замовчуванням, щоб перевірити, що користувач дійсно тапнул всього один раз. Проте така поведінка робить сайт менш адаптивним. Якщо задати touch-action в manipulation, то будь-яке торкання елемента буде запускати тільки панорамування або зум. Жести подвійного натискання будуть ігноруватися, одиночні натискання будуть виконуватися без затримки.

.element {
touch-action: manipulation;
}

Інший варіант використання touch-action – налаштування поведінки overscroll (часте поведінка типу «потягни, щоб оновити»). На контейнері можна задати властивість touch-action в pan-x pan-down, коли позиція скрола дорівнює 0, і pan-x pan-y, коли позиція скрола дорівнює будь-якому іншому значенню. Це означає, що якщо користувач потягне екран пальцем вниз, коли позиція скрола контейнера знаходиться в самому верху, то спрацює обробник події pointer.

Демо

Властивість використовується для сенсорних екранів, рекомендується перевіряти його на пристроях з сенсорним екраном.

Підтримка в браузерах

Властивість touch-action

Властивість touch-action контролює події фільтрації жестів і дає розробникам декларативний механізм для вибіркового відключення сенсорної прокрутки (по одній або обох осях) і масштабування по подвійному тапу.

Підтримується з таких версій:

Властивість touch-action CSS