Anda dan pengguna menginginkan aplikasi web seluler yang bereaksi dan men-scroll dengan lancar saat disentuh. Mengembangkannya seharusnya mudah, tetapi sayangnya, reaksi browser web seluler terhadap peristiwa sentuh selama scrolling dibiarkan sebagai detail penerapan dalam spesifikasi TouchEvent. Oleh karena itu, pendekatan dapat dibagi kira-kira menjadi 4 kategori. Situasi ini mengekspos ketegangan fundamental antara memberikan kelancaran scroll dan mempertahankan kontrol developer.
Empat model pemrosesan peristiwa sentuh yang berbeda?
Perbedaan perilaku di antara browser dibagi menjadi empat model.
Pemrosesan peristiwa sinkron normal
Peristiwa Touchmove dikirim selama scrolling dan setiap update scroll akan diblokir hingga penanganan touchmove selesai. Ini bagus sebagai yang paling sederhana untuk dipahami dan paling kuat tetapi buruk untuk performa scroll karena berarti setiap frame selama scroll harus memblokir thread utama.
Browser: Browser Android (Android 4.0.4, 4.3), Mobile Safari (saat men-scroll div)
Pemrosesan touchmove asinkron
Peristiwa touchmove dikirim selama scrolling, tetapi scroll dapat dilanjutkan secara asinkron (peristiwa touchmove diabaikan setelah scroll dimulai). Hal ini dapat menyebabkan "penanganan ganda" peristiwa, misalnya, terus men-scroll setelah situs melakukan sesuatu dengan touchmove dan memanggil preventDefault pada peristiwa, yang memberi tahu browser untuk tidak menanganinya.
Browser: Mobile Safari (saat men-scroll Dokumen), Firefox
Touchmove ditekan saat men-scroll
Peristiwa gerakan sentuh tidak dikirim setelah scroll dimulai dan tidak dilanjutkan hingga setelah peristiwa touchend. Dalam model ini, sulit untuk membedakan antara sentuhan statis dan scroll.
Browser: Browser Samsung (peristiwa mousemove dikirim)
Perbankan sentuh saat mulai scroll
Anda tidak dapat melakukan keduanya -- kehalusan scroll dan kontrol developer -- dan model ini memperjelas kompromi antara scroll yang lancar dan penanganan peristiwa, mirip dengan semantik spesifikasi Peristiwa Pointer. Beberapa pengalaman yang mungkin perlu melacak jari, seperti tarik untuk menyegarkan, tidak memungkinkan.
Browser: Chrome Desktop M32+, Chrome Android
Mengapa Berubah?
Chrome untuk Android saat ini menggunakan Model Lama Chrome: touchcancel saat mulai scroll, yang meningkatkan performa scroll, tetapi menyebabkan kebingungan bagi developer. Secara khusus, beberapa developer tidak mengetahui peristiwa touchcancel atau cara menanganinya, dan ini menyebabkan beberapa situs rusak. Yang lebih penting, seluruh class efek dan perilaku scroll UI seperti tarik untuk refresh, batang sembunyi, dan titik snap sulit atau tidak mungkin diterapkan dengan baik.
Daripada menambahkan fitur yang di-hardcode secara khusus untuk mendukung efek ini, Chrome bertujuan untuk berkonsentrasi pada penambahan primitif platform yang memungkinkan developer menerapkan efek ini secara langsung. Lihat Platform Web Rasional untuk penjelasan umum tentang filosofi ini.
Model Baru Chrome: Model Touchmove Asinkron Throttled
Chrome memperkenalkan perilaku baru
yang dirancang untuk meningkatkan kompatibilitas dengan kode yang ditulis untuk browser lain saat
men-scroll, serta memungkinkan skenario lain yang bergantung pada mendapatkan peristiwa
touchmove saat men-scroll. Fitur ini diaktifkan secara default dan Anda dapat menonaktifkannya
dengan tanda berikut, chrome://flags\#touch-scrolling-mode.
Perilaku baru tersebut adalah:
- Touchmove pertama dikirim secara sinkron agar scroll dapat dibatalkan
- Selama scroll aktif
- Peristiwa touchmove dikirim secara asinkron
- throttled menjadi 1 peristiwa per throttled, atau jika region slop throttled CSS terlampaui
- Event.cancelable bernilai false
- Jika tidak, peristiwa touchmove akan diaktifkan secara sinkron seperti biasa saat scroll aktif berhenti atau tidak memungkinkan karena batas scroll telah tercapai
- Peristiwa touchend selalu terjadi saat pengguna mengangkat jarinya
Anda dapat mencoba demo ini di Chrome untuk Android dan beralih
tanda chrome://flags\#touch-scrolling-mode untuk melihat perbedaannya.
Beri tahu kami pendapat Anda
Model Touchmove Async memiliki potensi untuk meningkatkan kompatibilitas lintas browser dan mengaktifkan class efek gestur sentuh yang baru. Kami ingin mendengar pendapat developer dan melihat hal-hal kreatif yang dapat Anda lakukan dengan fitur tersebut.