Anda dan pengguna menginginkan aplikasi web seluler yang bereaksi dan men-scroll dengan lancar saat disentuh. Mengembangkannya seharusnya mudah, tetapi sayangnya, cara browser web seluler merespons peristiwa sentuh selama scroll dibiarkan sebagai detail implementasi dalam spesifikasi TouchEvent. Oleh karena itu, pendekatan dapat dibagi menjadi 4 kategori. Situasi ini menunjukkan ketegangan mendasar antara memberikan kelancaran scroll dan mempertahankan kontrol developer.
Empat model pemrosesan peristiwa sentuh yang berbeda?
Perbedaan perilaku antara browser dibagi menjadi empat model.
Pemrosesan peristiwa sinkron normal
Peristiwa touchmove dikirim selama scroll dan setiap update scroll akan diblokir hingga penanganan touchmove selesai. Hal ini baik karena paling sederhana untuk dipahami dan paling canggih, tetapi buruk untuk performa scroll karena berarti setiap frame selama scroll harus diblokir di thread utama.
Browser: Browser Android (Android 4.0.4, 4.3), Safari Seluler (saat men-scroll div)
Pemrosesan touchmove asinkron
Peristiwa touchmove dikirim selama scroll, 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: Safari Seluler (saat men-scroll Dokumen), Firefox
Touchmove ditekan saat men-scroll
Peristiwa touchmove tidak dikirim setelah scroll dimulai dan tidak dilanjutkan hingga setelah peristiwa touchend. Dalam model ini, sulit untuk membedakan antara sentuhan diam dan scroll.
Browser: Samsung Browser (peristiwa mousemove dikirim)
Touchcancel saat scroll dimulai
Anda tidak dapat memiliki keduanya -- kelancaran 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 memuat ulang, tidak dapat dilakukan.
Browser: Chrome Desktop M32+, Chrome Android
Mengapa Perubahan?
Chrome untuk Android saat ini menggunakan Model Lama Chrome: touchcancel saat awal scroll, yang meningkatkan performa scroll, tetapi menyebabkan kebingungan developer. Secara khusus, beberapa developer tidak mengetahui peristiwa touchcancel atau cara menanganinya, dan hal ini telah menyebabkan beberapa situs mengalami error. Yang lebih penting, seluruh class efek dan perilaku scroll UI, seperti pull-to-refresh, hidey bars, dan snap points sulit atau tidak dapat diterapkan dengan baik.
Daripada menambahkan fitur hardcode tertentu 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 mengetahui penjelasan umum tentang filosofi ini.
Model Baru Chrome: Model Touchmove Asinkron yang Dibatasi
Chrome memperkenalkan perilaku baru
yang dirancang untuk meningkatkan kompatibilitas dengan kode yang ditulis untuk browser lain saat
men-scroll, serta mengaktifkan skenario lain yang bergantung pada mendapatkan peristiwa
touchmove saat men-scroll. Fitur ini diaktifkan secara default dan Anda dapat menonaktifkannya
dengan flag berikut, chrome://flags\#touch-scrolling-mode.
Perilaku barunya adalah:
- Touchmove pertama dikirim secara sinkron untuk memungkinkan scroll dibatalkan
- Selama scroll aktif
- peristiwa touchmove dikirim secara asinkron
- dibatasi menjadi 1 peristiwa per 200 md, atau jika wilayah slop CSS 15 px dilampaui
- Event.cancelable adalah false
- Jika tidak, peristiwa touchmove akan diaktifkan secara sinkron seperti biasa saat scroll aktif dihentikan atau tidak dapat dilakukan karena batas scroll telah tercapai
- Peristiwa touchend selalu terjadi saat pengguna mengangkat jarinya
Anda dapat mencoba demo ini di Chrome untuk Android dan mengalihkan
tanda chrome://flags\#touch-scrolling-mode untuk melihat perbedaannya.
Beri tahu kami pendapat Anda
Model Async Touchmove berpotensi meningkatkan kompatibilitas lintas browser dan mengaktifkan class baru efek gestur sentuh. Kami ingin mendengar pendapat developer, dan melihat hal-hal kreatif yang dapat Anda lakukan dengannya.