Usar la API de History para administrar tus URLs es una función increíble y, además, fundamental para las buenas apps web. Sin embargo, una de sus desventajas es que las posiciones de desplazamiento se almacenan y, lo que es más importante, se restablecen cada vez que recorres el historial. Esto suele provocar saltos desagradables a medida que la posición de desplazamiento cambia automáticamente, en especial, si tu app realiza transiciones o cambia el contenido de la página de alguna manera. En última instancia, esto genera una experiencia del usuario horrible.
Para empeorar las cosas, hay muy poco que puedas 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
(¡Uf!, 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. ¡Bah!
Sin embargo, la buena noticia es que existe una posible solución: history.scrollRestoration
. Toma dos valores de cadena: auto
, que mantiene todo como está hoy (y es su valor predeterminado), y manual
, lo que significa que tú, como desarrollador, te apropiarás de cualquier cambio de desplazamiento que pueda ser necesario cuando un usuario recorra el historial de la app. Si es necesario, puedes hacer un seguimiento de la posición de desplazamiento mientras envías entradas de historial con history.pushState()
.
La función es nueva y experimental (aunque es muy útil), así que asegúrate de verificar que esté disponible antes de usarla:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
Encontrarás history.scrollRestoration
en Chrome 46 en adelante, y puedes encontrar sus especificaciones aquí.
No olvides dejarnos tus comentarios y avisar a otros proveedores si quieres que también admitan scrollRestoration
.