Properti CSS touch-action memungkinkan developer membatasi cara pengguna
berinteraksi dengan elemen yang sangat membantu untuk mencegah peristiwa
dikirim saat tidak diperlukan.
Sebelum versi 55, Chrome mendukung pan-x dan pan-y yang membatasi elemen
untuk men-scroll ke satu arah.
Video di bawah menunjukkan contoh elemen tanpa tindakan sentuh yang ditentukan (kiri), serta pan-x dan pan-y (tengah dan kanan).
CSS untuk screen-cast tangan tengah dan kanan adalah:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
Di Chrome 55, pan-left, pan-right, pan-up, dan pan-down ditambahkan. Properti
ini memiliki perbedaan perilaku yang halus, tetapi penting.
Properti ini memaksa pengguna untuk memulai gestur dalam satu arah sebelum elemen akan merespons. Hal ini mirip dengan gestur "tarik untuk memuat ulang" yang hanya merespons saat pengguna melakukan gestur ke bawah di layar.
Video berikut menunjukkan pan-right dan pan-down yang
memerlukan gestur untuk dimulai dari kanan ke kiri dan bawah ke atas.
Setelah gestur dimulai, Anda dapat
men-geser maju mundur. Hanya arah awal yang terpengaruh.
Meskipun video ini menunjukkan perilaku ini, Anda mungkin akan lebih mudah mencobanya sendiri dengan melihat contohnya.
CSS untuk demo ini adalah:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
Hal terakhir yang terjadi di dunia tindakan sentuh adalah
properti pinch-zoom. Ini adalah properti baru di Chrome 55, di balik tanda,
yang dapat digunakan dengan opsi geser apa pun
(yaitu pan-x, pan-y, pan-left, pan-right, pan-down, pan-up).
Jika Anda mencubit situs, konten halaman biasanya akan diperbesar.
Menentukan touch-action akan mencegah perilaku ini, tetapi menambahkan cubit-zoom
akan mengaktifkan kembali perilaku ini.
Video ini menunjukkan perbedaan antara touch-action: pan-x dan
touch-action: pan-x pinch-zoom;
Semua properti ini akan menyederhanakan beberapa logika yang
harus diterapkan oleh developer menggunakan pointer-events.