API de History: Restablecimiento de desplazamiento

Es increíble usar la API de History para administrar tus URLs y, a medida que sucede, una función fundamental de las apps web eficaces. Sin embargo, una de las desventajas es que las posiciones de desplazamiento se almacenan y, lo que es más importante, se restablecen cada vez que recorres el historial. A menudo, esto significa saltos desagradables, ya 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 pésima.

Para peor aún, no se puede hacer nada 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. ¡Bah!

Sin embargo, la buena noticia es que puede haber una 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 harás 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 desplazas las entradas del historial con history.pushState().

Esta función es nueva y experimental (aunque es totalmente increíble), 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 y versiones posteriores, y consulta sus especificaciones aquí.

No olvides dejarnos comentarios y contarles a otros proveedores si deseas que también apoyen a scrollRestoration.