Jika ada satu hal yang benar-benar diinginkan orang dari scroll, itu adalah kelancaran. Secara historis, Chrome memiliki scroll yang lancar di beberapa tempat, seperti -- misalnya -- saat pengguna men-scroll dengan trackpad, atau menggeser halaman di perangkat seluler. Namun, jika pengguna mencolokkan mouse, mereka akan mendapatkan perilaku scroll “bertingkat” yang lebih bergetar, yang jauh lebih tidak menarik secara estetika. Semuanya akan berubah di Chrome 49.
Solusi untuk perilaku scroll native berundak yang didorong input bagi banyak developer adalah menggunakan library, yang tujuannya adalah memetakan ulang ke sesuatu yang lebih halus dan lebih enak dilihat. Pengguna juga melakukan hal ini melalui ekstensi. Namun, ada kelemahan pada library dan ekstensi yang mengubah scroll:
- Rasa uncanny valley. Hal ini terwujud dalam dua cara: pertama, satu situs mungkin memiliki perilaku scroll yang lancar, tetapi situs lain mungkin tidak, sehingga pengguna dapat merasa disorientasi karena inkonsistensi tersebut. Kedua, fisika kelancaran library tidak selalu cocok dengan fisika platform. Jadi, meskipun gerakannya mungkin lancar, gerakan tersebut dapat terasa salah atau aneh.
- Peningkatan kecenderungan untuk pertentangan dan jank thread utama. Seperti JavaScript apa pun yang ditambahkan ke halaman, akan ada peningkatan beban CPU. Hal ini tidak selalu menjadi masalah, bergantung pada hal lain yang dilakukan halaman, tetapi jika ada beberapa tugas yang berjalan lama di thread utama, dan scroll telah digabungkan ke thread utama, hasil akhirnya dapat berupa scroll yang tersendat dan jank.
- Lebih banyak pemeliharaan untuk developer, lebih banyak kode yang dapat didownload pengguna. Memiliki library untuk melakukan scroll yang lancar akan menjadi sesuatu yang harus selalu diupdate dan dikelola, dan akan menambah keseluruhan berat halaman situs.
Kelemahan ini juga sering terjadi pada banyak library yang menangani perilaku scroll, baik itu efek paralaks, maupun animasi lain yang dikaitkan dengan scroll. Hal ini sering kali memicu jank, mengganggu aksesibilitas, dan umumnya merusak pengalaman pengguna. Scroll adalah interaksi inti web, dan mengubahnya dengan library harus dilakukan dengan sangat hati-hati.
Di Chrome 49, perilaku scroll default akan berubah di Windows, Linux, dan ChromeOS. Perilaku scroll lama yang bertahap akan dihapus, dan scroll akan menjadi lancar secara default. Anda tidak perlu mengubah kode, kecuali mungkin menghapus library scroll halus jika Anda telah menggunakannya.
Fitur scroll lainnya
Ada juga hal menarik lainnya terkait scroll yang sedang dalam proses dan juga patut disebutkan. Banyak dari kita menginginkan efek yang terkait 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 merugikan developer dan pengguna. Ada dua standar platform yang sedang dikerjakan yang dapat membantu: Worklet Compositor dan properti CSS scroll-behavior.
Houdini
Worklet Compositor adalah bagian dari Houdini, dan belum sepenuhnya ditentukan spesifikasinya dan diterapkan. Meskipun demikian, saat patch diluncurkan, patch tersebut akan memungkinkan Anda menulis JavaScript yang dijalankan sebagai bagian dari pipeline kompositor, yang secara umum berarti bahwa efek yang terkait dengan scroll seperti paralaks akan tetap sinkron dengan posisi scroll saat ini. Mengingat cara scroll ditangani saat ini, yaitu peristiwa scroll hanya dikirim secara berkala ke thread utama (dan dapat diblokir oleh tugas thread utama lainnya), hal ini akan menjadi langkah besar ke depan. Jika Anda tertarik dengan Worklet Compositor, atau fitur baru menarik lainnya yang dibawa Houdini, lihat postingan Pengantar Houdini oleh Surma, spesifikasi Houdini, dan kirimkan pendapat Anda ke mailing list Houdini.
scroll-behavior
Dalam hal scroll berbasis fragmen, properti CSS scroll-behavior adalah hal lain yang dapat membantu. Jika ingin mencobanya, Anda akan senang mengetahui bahwa fitur ini sudah dikirimkan di Firefox, dan Anda dapat mengaktifkannya di Chrome Canary menggunakan tanda “Enable experimental Web Platform features”. 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. Hal ini jauh lebih baik daripada harus menggunakan dan mengelola kode dari library yang mencoba melakukan hal yang sama. Dengan sesuatu yang mendasar seperti scroll, sangat penting untuk menghindari pemutusan ekspektasi pengguna. Jadi, meskipun fitur ini terus berubah, sebaiknya Anda tetap mengadopsi pendekatan Progressive Enhancement, dan menghapus library apa pun yang mencoba melakukan polyfill pada perilaku ini.
Lanjutkan dan scroll
Mulai Chrome 49, scroll menjadi lebih lancar. Namun, bukan itu saja: ada lebih banyak potensi peningkatan yang dapat diluncurkan, melalui properti Houdini dan CSS seperti smooth-scroll. Coba Chrome 49, beri tahu kami pendapat Anda, dan, yang terpenting, biarkan browser melakukan scroll jika memungkinkan.