Usar a API History para gerenciar seus URLs é incrível e, como acontece, é um recurso crucial dos bons apps da Web. Uma das desvantagens, no entanto, é que as posições de rolagem são armazenadas e, o mais importante, são restauradas sempre que você navega pelo histórico. Muitas vezes, isso significa saltos desagradáveis à medida que a posição de rolagem muda automaticamente, especialmente se o aplicativo realizar transições ou alterar o conteúdo da página de alguma forma. Em última análise, isso leva a uma experiência do usuário terrível.
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 no popState
e depois invertê-la no manipulador de eventos scroll
com window.scrollTo
. Epa, mas pelo menos funciona. No entanto, o Firefox aciona o evento scroll
antes de popState
, então você não tem ideia de qual era o valor de rolagem antigo para restaurá-lo. Ah, não!
A boa notícia é que existe 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 qualquer mudança de rolagem que possa ser necessária quando um usuário navegar pelo histórico do app. Se necessário, é possível acompanhar a posição de rolagem ao enviar as entradas do histórico com history.pushState()
.
O recurso é novo e experimental (embora totalmente incrível), então confira se ele está disponível antes de usá-lo:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
Você encontrará o history.scrollRestoration
a partir do Chrome 46 e confira as especificações aqui.
Não se esqueça de deixar seu feedback e informar outros fornecedores se você quer que eles apoiem o scrollRestoration
também.