Jika ada satu hal yang sangat diinginkan pengguna dari scrolling, semuanya adalah lancar. Secara historis Chrome memiliki scroll yang mulus di beberapa tempat, seperti -- misalnya -- saat pengguna men-scroll dengan trackpad, atau mengayunkan halaman di perangkat seluler. Tetapi jika pengguna telah mencolokkan mouse, maka mereka akan mendapatkan perilaku pengguliran "berlangkah" yang lebih gelisah, yang secara estetika tidak menyenangkan. Hal tersebut akan berubah di Chrome 49.
Solusi untuk perilaku scroll native berbasis input yang ditingkatkan bagi banyak developer adalah dengan menggunakan library, yang tujuannya adalah memetakan ulang ke sesuatu yang lebih lancar dan lebih bagus di mata. Pengguna juga melakukan hal ini melalui ekstensi. Namun, ada kelemahan pada library dan ekstensi yang mengubah scroll:
- Terasa lembah yang luar biasa. Hal ini terwujud dalam dua cara: pertama, satu situs mungkin memiliki perilaku scroll yang lancar, tetapi situs lainnya mungkin tidak, sehingga pengguna dapat mengalami disorientasi dengan inkonsistensi. Kedua, fisika kelancaran library tidak selalu sama dengan yang ada di platform. Jadi, meskipun gerakannya mungkin mulus, gerakannya bisa terasa salah atau tidak wajar.
- Peningkatan kecenderungan terjadinya pertentangan thread utama dan jank. Seperti halnya JavaScript yang ditambahkan ke halaman, akan ada peningkatan beban CPU. Hal ini bukan bencana, bergantung pada apa lagi yang dilakukan halaman, tetapi jika ada beberapa pekerjaan yang berjalan lama di thread utama, dan scrolling telah dikaitkan dengan thread utama, hasil akhirnya dapat berupa scroll yang tersendat dan tersendat.
- Semakin banyak pemeliharaan bagi developer, semakin banyak kode yang dapat didownload pengguna. Memiliki library untuk melakukan scroll yang mulus akan menjadi sesuatu yang harus selalu diperbarui dan dikelola, dan akan menambah bobot halaman secara keseluruhan dari situs ini.
Kekurangan ini sering kali juga terjadi pada banyak library yang menangani perilaku scroll, baik itu efek paralaks, maupun animasi yang dikaitkan dengan scroll lainnya. Semuanya terlalu sering memicu jank, menghalangi aksesibilitas, dan umumnya merusak pengalaman pengguna. Scrolling adalah interaksi inti dari web, dan mengubahnya dengan library harus dilakukan dengan sangat hati-hati.
Di Chrome 49, perilaku scroll default akan berubah pada Windows, Linux, dan ChromeOS. Perilaku scroll lama dan bertahap akan dihapus, dan scroll akan lancar secara default. Kode tidak perlu diubah, kecuali mungkin penghapusan library scroll yang lancar jika Anda telah menggunakannya.
Konten scroll lainnya
Ada hal-hal lain terkait scroll dalam karya ini yang juga perlu disebutkan. Banyak dari kita menginginkan efek yang digabungkan dengan scroll, seperti paralaks, scroll yang lancar ke fragmen dokumen (seperti example.com/#somesection). Seperti yang saya sebutkan sebelumnya, pendekatan yang digunakan saat ini sering kali dapat merugikan developer dan pengguna. Ada dua standar platform yang sedang dikerjakan dan dapat membantu: Worklet Compositor dan properti CSS scroll-behavior.
Houdini
Worklet Compositor adalah bagian dari Houdini, dan belum ditetapkan serta diterapkan sepenuhnya. Meskipun demikian, saat patch mendarat, patch akan memungkinkan Anda untuk menulis JavaScript yang dijalankan sebagai bagian dari pipeline compositor, yang secara umum berarti bahwa efek yang dikaitkan dengan scroll seperti paralaks akan tetap sinkron dengan posisi scroll saat ini. Mengingat cara scroll saat ini ditangani, saat peristiwa scroll hanya dikirim secara berkala ke thread utama (dan dapat diblokir oleh pekerjaan thread utama lainnya), hal ini akan menunjukkan lompatan besar ke depan. Jika Anda tertarik dengan Worklet Compositor, atau fitur baru menarik lainnya yang disediakan Houdini, lihat postingan Pengantar Houdini oleh Surma, spesifikasi Houdini, dan beri kontribusi pendapat Anda ke milis Houdini.
perilaku scroll
Dalam hal scroll berbasis fragmen, properti CSS scroll-behavior adalah hal lain yang dapat membantu. Jika ingin mencobanya, Anda pasti senang mengetahui bahwa aplikasi telah dikirim dalam Firefox, dan Anda dapat mengaktifkannya di Chrome Canary menggunakan tanda “Aktifkan fitur Platform Web eksperimental”. Jika Anda menetapkan -- misalnya -- elemen <body> ke scroll-behavior: smooth, semua scroll yang dipicu oleh perubahan fragmen atau oleh window.scrollTo akan dianimasikan dengan lancar. Itu jauh lebih baik daripada harus menggunakan dan mengelola kode dari library yang mencoba melakukan hal yang sama. Dengan sesuatu yang mendasar seperti scrolling, sangat penting untuk menghindari memenuhi ekspektasi pengguna. Jadi, meskipun fitur ini tidak stabil, ada baiknya Anda menggunakan pendekatan Peningkatan Progresif dan menghapus library apa pun yang mencoba mem-polyfill perilaku ini.
Maju dan scroll
Mulai Chrome 49, scroll menjadi lebih lancar. Namun bukan itu saja: masih ada lebih banyak potensi peningkatan yang mungkin dicapai, melalui properti Houdini dan CSS seperti smooth-scroll. Cobalah Chrome 49, beri tahu kami pendapat Anda, dan, yang terpenting, biarkan browser melakukan scroll sejauh mungkin!