CSS touch-action — керування сенсорними жестами

CSS властивість touch-action визначає, які сенсорні жести браузер обробляє сам (прокрутку, зум), а які віддає обробникам подій.

правити

Загальний опис

Це ключ до плавних жестів на мобільних. Якщо на елементі власна обробка перетягування, а браузер водночас намагається прокрутити сторінку — вийде смикання.

touch-action: none віддає всі жести скрипту. pan-y дозволяє лише вертикальну прокрутку — саме те, що треба горизонтальній каруселі.

Значення manipulation вимикає розпізнавання подвійного тапу й тим самим прибирає стару затримку 300 мс перед кліком.

правити

Порада

touch-action: manipulation на кнопках прибирає затримку кліку на мобільних — безкоштовне прискорення інтерфейсу.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

touch-action: auto | none | [ pan-x || pan-y ] | manipulation;

Властивість touch-action може отримувати 5 значень:

auto

Усі жести обробляє браузер.

автор: NagarD

правити

none

Усі жести віддаються обробникам подій.

автор: NagarD

правити

pan-x

Дозволена лише горизонтальна прокрутка.

автор: NagarD

правити

pan-y

Дозволена лише вертикальна прокрутка.

автор: NagarD

правити

manipulation

Прокрутка і щипковий зум, без подвійного тапу.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
touch-action	36+	52+	13+	23+	12+	11+

Підтримка: мобільні переглядачі

Переглядач
touch-action	55+	yes	yes	13+

Приклади

+ запропонувати свій приклад у пісочниці

<div class="carousel">
    <div>Слайд 1</div>
    <div>Слайд 2</div>
</div>
<button>Кнопка без затримки</button>

.carousel {
    display: flex;
    overflow-x: auto;
    /* браузер керує лише вертикаллю, горизонталь — наша */
    touch-action: pan-y;
}

button {
    touch-action: manipulation;
}