Properti CSS touch-action
memungkinkan developer membatasi cara pengguna berinteraksi dengan suatu elemen, yang sangat berguna 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 ini menunjukkan contoh elemen tanpa tindakan sentuh yang ditentukan (kiri), serta geser-x dan geser-y (tengah dan kanan).
CSS untuk transmisi layar sebelah kanan dan tengah adalah:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
Pada Chrome 55, pan-left
, pan-right
, pan-up
, dan pan-down
ditambahkan. Properti ini memiliki perbedaan perilaku yang kecil tetapi penting.
Properti ini memaksa pengguna untuk memulai gestur dalam satu arah sebelum elemen merespons. Hal ini mirip dengan gestur "tarik untuk refresh" yang hanya merespons saat pengguna memberi gestur ke bawah pada layar.
Video berikut menunjukkan pan-right
dan pan-down
yang
memerlukan gestur untuk dimulai dari kanan ke kiri dan dari bawah ke atas.
Setelah gestur dimulai, Anda sebenarnya dapat
menggesernya bolak-balik. Hanya arah awal yang terpengaruh.
Meskipun video menunjukkan perilaku ini, Anda dapat lebih mudah mencoba 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 belakang tanda,
yang dapat digunakan dengan salah satu opsi geser
(yaitu pan-x
, pan-y
, pan-left
, pan-right
, pan-down
, pan-up
).
Jika Anda mencubit situs, biasanya konten halaman akan diperbesar.
Menentukan touch-action
akan mencegah perilaku ini, tetapi menambahkan cubit dan 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 harus menyederhanakan beberapa logika yang
harus diimplementasikan oleh developer menggunakan pointer-events
.