History API - Pemulihan scroll

Menggunakan History API untuk mengelola URL Anda sangatlah membantu dan saat hal itu terjadi, merupakan fitur penting bagi aplikasi web yang baik. Namun, salah satu kelemahannya adalah posisi scroll disimpan, lalu, yang lebih penting, dipulihkan setiap kali Anda melintasi histori. Ini sering kali berarti lompatan yang tidak terlihat saat posisi scroll berubah secara otomatis, terutama jika aplikasi Anda melakukan transisi, atau mengubah konten halaman dengan cara apa pun. Pada akhirnya, hal ini berujung pada pengalaman yang buruk bagi pengguna.

Untuk memperburuk masalah, tidak banyak yang dapat Anda lakukan terkait hal ini: 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 berhasil.). Namun, Firefox memicu peristiwa scroll sebelum popState, sehingga Anda tidak mengetahui nilai scroll lama untuk memulihkannya. Bah!

Namun, kabar baiknya adalah ada kemungkinan perbaikan: history.scrollRestoration. Dibutuhkan dua nilai string: auto, yang mempertahankan semuanya seperti saat ini (dan merupakan nilai defaultnya), dan manual, yang berarti bahwa Anda sebagai developer akan mengambil alih kepemilikan atas setiap perubahan scroll yang mungkin diperlukan saat pengguna menjelajahi histori aplikasi. Jika perlu, Anda dapat melacak posisi scroll saat Anda mengirim entri histori dengan history.pushState().

Fitur ini baru dan eksperimental (meskipun benar-benar mengagumkan), 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 menemukan spesifikasinya di sini.

Jangan lupa untuk memberikan masukan kepada kami, dan beri tahu vendor lain jika Anda juga ingin mereka mendukung scrollRestoration.