Usar a API History para gerenciar URLs é uma ótima opção e, ao mesmo tempo, um recurso crucial para bons apps da Web. No entanto, uma das desvantagens é que as posições de rolagem são armazenadas e, mais importante, restauradas sempre que você percorre o histórico. Isso geralmente significa saltos feios à medida que a posição de rolagem muda automaticamente, especialmente se o app faz transições ou muda o conteúdo da página de alguma forma. Isso leva a uma experiência horrível para o usuário.
Para piorar, não há muito o que fazer: o Chrome aciona um evento popState
antes do evento scroll
, o que significa que você pode ler a posição de rolagem atual em popState
e revertê-la no manipulador de eventos scroll
com window.scrollTo
(Ewww, mas pelo menos funciona!). No entanto, o Firefox aciona o evento scroll
antes de popState
. Portanto, você não sabe qual era o valor antigo da rolagem para restaurá-lo. Bah!
A boa notícia é que há uma possível correção: history.scrollRestoration
. Ele usa dois valores de string: auto
, que mantém tudo como está hoje (e é o valor padrão), e manual
, que significa que você, como desenvolvedor, terá a propriedade de todas as mudanças de rolagem que podem ser necessárias quando um usuário percorrer o histórico do app. Se necessário, é possível acompanhar a posição de rolagem ao enviar entradas de histórico com history.pushState()
.
O recurso é novo e experimental (mas totalmente incrível), então verifique se ele está disponível antes de usá-lo:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
A history.scrollRestoration
está disponível no Chrome 46 e versões mais recentes. Confira as especificações aqui.
Não se esqueça de enviar feedback e informar aos outros fornecedores se você quiser que eles também ofereçam suporte ao scrollRestoration
.