Menggunakan History API untuk mengelola URL Anda adalah hal yang hebat dan, kebetulan, fitur penting dari aplikasi web yang baik. Namun, salah satu kekurangannya adalah posisi scroll disimpan dan yang lebih penting, dipulihkan setiap kali Anda menelusuri histori. Ini sering kali berarti lompatan yang tidak menyenangkan saat posisi scroll berubah secara otomatis, dan terutama jika aplikasi Anda melakukan transisi, atau mengubah konten halaman dengan cara apa pun. Pada akhirnya, hal ini menyebabkan pengalaman pengguna yang buruk.
Untuk memperburuk masalah, sangat sedikit yang dapat Anda lakukan untuk menanganinya: Chrome memicu peristiwa popState sebelum peristiwa scroll, yang berarti Anda dapat membaca posisi scroll saat ini di popState, lalu membaliknya di pengendali peristiwa scroll dengan window.scrollTo (Ewww, tetapi setidaknya ini berfungsi!). Namun, Firefox memicu peristiwa scroll sebelum popState, sehingga Anda tidak tahu berapa nilai scroll lama untuk memulihkannya. Bah!
Namun, kabar baiknya adalah ada kemungkinan perbaikan: history.scrollRestoration. Diperlukan dua nilai string: auto, yang mempertahankan semuanya seperti saat ini (dan merupakan nilai default-nya), dan manual, yang berarti bahwa Anda sebagai developer akan mengambil alih kepemilikan setiap perubahan scroll yang mungkin diperlukan saat pengguna menjelajahi histori aplikasi. Jika perlu, Anda dapat melacak posisi scroll saat mendorong entri histori dengan history.pushState().
Fitur ini baru dan bersifat eksperimental (meskipun sangat luar biasa), jadi pastikan untuk memeriksa ketersediaannya sebelum menggunakannya:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
Anda akan menemukan history.scrollRestoration di Chrome 46 dan seterusnya, dan Anda dapat menemukan spesifikasinya di sini.
Jangan lupa untuk memberikan masukan kepada kami, dan beri tahu vendor lain jika Anda ingin mereka juga mendukung scrollRestoration.