Usar a API History para gerenciar seus URLs é incrível e, atualmente, um recurso crucial de bons apps da Web. No entanto, uma de suas 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 desagradáveis à medida que a posição de rolagem muda automaticamente, especialmente se o app fizer transições ou mudar o conteúdo da página de alguma forma. No fim das contas, isso leva a uma experiência do usuário horrível.
Para piorar, há muito pouco que se pode fazer a respeito: 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 invertê-la no manipulador de eventos scroll
com window.scrollTo
. 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. Eba!
A boa notícia é que há uma possível correção: history.scrollRestoration
. Ela 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, vai se responsabilizar por todas as mudanças de rolagem necessárias quando um usuário percorrer o histórico do app. Se precisar, você pode acompanhar a posição de rolagem enviando as entradas do histórico com history.pushState()
.
O recurso é novo e experimental, embora totalmente incrível. Portanto, certifique-se de verificar 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 as especificações dele aqui.
Deixe seu feedback e informe outros fornecedores se quiser que eles apoiem o scrollRestoration
também.