Anda dan pengguna menginginkan aplikasi web seluler yang dapat bereaksi dan dapat bergulir dengan lancar ke sentuh. Mengembangkannya seharusnya mudah tetapi, sayangnya, web seluler browser bereaksi terhadap peristiwa sentuh selama scroll dibiarkan sebagai implementasi detail dalam spesifikasi TouchEvent. Sebagai hasilnya, pendekatan dapat dipecah kurang lebih menjadi 4 kategori. Ini memperlihatkan ketegangan fundamental antara pengiriman kelancaran scroll dan dan memelihara kontrol developer.
Empat model pemrosesan peristiwa sentuh yang berbeda?
Perbedaan perilaku di antara browser tersebut dibagi menjadi empat model.
Pemrosesan peristiwa sinkron normal
Peristiwa touchmove dikirim selama pengguliran dan setiap blok pembaruan gulir hingga penanganan touchmove selesai. Ini bagus sebagai cara yang paling mudah dipahami dan paling efektif tetapi buruk untuk performa scroll karena berarti setiap frame selama scroll harus menghalangi thread utama.
Browser: Browser Android (Android 4.0.4, 4.3), Mobile Safari (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: Mobile Safari (saat men-scroll Dokumen), Firefox
Touchmove ditekan saat men-scroll
Peristiwa touchmove tidak dikirim setelah pengguliran dimulai dan tidak dilanjutkan hingga peristiwa sentuhan akhir. Pada model ini, sulit untuk membedakan antara sentuhan diam dan scroll.
Browser: Browser Samsung (peristiwa mousemove dikirim)
Touchcancel saat scroll dimulai
Anda tidak dapat melakukan 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 menyegarkan, tidak mungkin dilakukan.
Browser: Chrome Desktop M32+, Chrome Android
Mengapa Berubah?
Chrome untuk Android saat ini menggunakan Model Lama Chrome: touchcancel saat men-scroll tidak baik, yang meningkatkan performa scroll, tetapi menyebabkan kebingungan bagi developer. Secara khusus, beberapa developer tidak mengetahui peristiwa {i>touchcancel<i} atau cara menanganinya, dan ini telah menyebabkan beberapa situs web rusak. Lebih penting lagi, seluruh class efek dan perilaku scroll UI, seperti tarik untuk refresh, batang tersembunyi, dan titik snap sulit atau tidak mungkin diterapkan ya.
Alih-alih menambahkan fitur yang di-hardcode secara khusus untuk mendukung efek ini, Chrome bertujuan untuk berkonsentrasi pada penambahan primitif platform yang memungkinkan developer untuk menerapkan efek ini secara langsung. Lihat Platform Web Rasional untuk penjelasan umum 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
dapat di-scroll, serta memungkinkan skenario lain yang bergantung pada proses touchmove
peristiwa ketika menggulir. Fitur ini diaktifkan secara default dan Anda dapat mengaktifkannya
dengan flag berikut, chrome://flags\#touch-scrolling-mode.
Perilaku barunya adalah:
- Touchmove pertama dikirim secara sinkron agar scroll dapat dibatalkan
- Selama scroll aktif
- Peristiwa touchmove dikirim secara asinkron
- di-throttle hingga 1 peristiwa per 200 md, atau jika region slop 15 px CSS terlampaui
- Event.cancelable bernilai false
- Jika tidak, peristiwa touchmove akan diaktifkan secara sinkron seperti biasa saat scroll aktif dihentikan atau tidak mungkin dilakukan karena batas scroll telah tercapai
- Peristiwa sentuhan selalu terjadi saat pengguna mengangkat jarinya
Anda dapat mencoba demo ini di Chrome untuk Android dan mengaktifkan/menonaktifkan
chrome://flags\#touch-scrolling-mode untuk melihat perbedaannya.
Beri tahu kami pendapat Anda
Model Touchmove Asinkron memiliki potensi untuk meningkatkan kinerja lintas browser kompatibilitas mundur dan mengaktifkan kelas baru untuk efek gestur sentuh. Kami tertarik dalam mendengar apa yang dipikirkan developer, dan saat melihat hal-hal kreatif yang dapat Anda lakukan dengannya.