Usar la API de History para administrar tus URL es increíble y, a medida que sucede, es una función fundamental de las apps web eficaces. Una de sus desventajas, sin embargo, es que las posiciones de desplazamiento se almacenan y, lo que es más importante, se restauran cada vez que recorres el historial. A menudo, esto significa saltos antiestéticos a medida que la posición de desplazamiento cambia automáticamente, en especial, si tu app hace transiciones o cambia el contenido de la página de alguna manera. En última instancia, esto genera una experiencia del usuario horrible.
Para empeorar la situación, hay muy poco que puedes hacer al respecto: Chrome activa un evento popState antes del evento scroll, lo que significa que puedes leer la posición de desplazamiento actual en popState y, luego, revertirla en el controlador de eventos scroll con window.scrollTo (Ewww, ¡pero al menos funciona!). Sin embargo, Firefox activa el evento scroll antes de popState, por lo que no tienes idea de cuál era el valor de desplazamiento anterior para restablecerlo. ¡Increíble!
Sin embargo, la buena noticia es que hay una posible solución: history.scrollRestoration. Toma dos valores de cadena: auto, que mantiene todo como está actualmente (y es su valor predeterminado), y manual, lo que significa que tú, como desarrollador, serás el responsable de cualquier cambio de desplazamiento que pueda ser necesario cuando un usuario recorre el historial de la app. Si es necesario, puedes realizar un seguimiento de la posición de desplazamiento a medida que envías entradas del historial con history.pushState().
La función es nueva y experimental (aunque totalmente increíble), así que asegúrate de que esté disponible antes de usarla:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
Encontrarás history.scrollRestoration a partir de Chrome 46 y encontrar sus especificaciones aquí.
No olvides dejarnos comentarios y avisar a otros proveedores si quieres que también apoyen scrollRestoration.