
Hakim El Hattab twittou um pequeno aprimoramento UX muito bom para um site estático que inclui uma barra lateral de navegação rolável.https://twitter.com/hakimel/status/1262337065670316033
O truque é lançar a posição de rolagem para a localStorage
direita antes de a página sair e, quando carregada, pegue esse valor e vá até ele. Vou digitá-lo novamente a partir do 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);
});
O que é surpreendente é que você não consegue uma posição de rolagem com flash errado. Eu quero saber porque? Talvez isso tenha a ver com tinta sofisticada que os navegadores estão fazendo agora? Não tenho certeza.