Memorizar la posición de desplazamiento al cargar la página

Hakim El Hattab tuiteó una pequeña mejora de UX realmente agradable para un sitio estático que incluye una barra lateral de navegación desplazable.

Si tiene un sitio estático con una barra lateral desplazable, realmente ayuda memorizar la posición de desplazamiento al cargar la página.

(La izquierda es la predeterminada, la derecha memorizada) pic.twitter.com/bLgtILP1JP

– Hakim El Hattab (@hakimel) 18 de mayo de 2020

El truco consiste en colocar la posición de desplazamiento localStoragejusto antes de salir de la página y, cuando esté cargada, tomar ese valor y desplazarse hasta él. Lo volveré a escribir del tweet...

let sidebar = document.querySelector(".sidebar");let top = localStorage.getItem("sidebar-scroll");if (top !== null) {  sidebar.scrollTop = parseInt(top, 10);}window.addEventListener("beforeunload", () = {  localStorage.setItem("sidebar-scroll", sidebar.scrollTop);});

Lo sorprendente es que no aparece un destello de posición de desplazamiento incorrecta. ¿Me pregunto porque? ¿Tal vez tenga que ver con cosas sofisticadas que los navegadores están haciendo ahora? No estoy seguro.

Si quieres conocer otros artículos parecidos a Memorizar la posición de desplazamiento al cargar la página puedes visitar la categoría Tutoriales.