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.

 






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

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

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.

programar

es

https://aprendeprogramando.es/static/images/programar-memorizar-la-posicion-de-desplazamiento-al-cargar-la-pagina-1621-0.jpg

2024-06-13

 

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

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences