Utilizzare l'API History per gestire gli URL è fantastico e, in quel momento, è una funzionalità fondamentale delle buone app web. Uno degli svantaggi, tuttavia, è che le posizioni di scorrimento vengono memorizzate e, cosa più importante, ripristinate ogni volta che attraversi la cronologia. Questo spesso comporta dei salti sgradevoli quando la posizione di scorrimento cambia automaticamente, soprattutto se la tua app esegue transizioni o modifica in qualsiasi modo i contenuti della pagina. Questo porta a un'esperienza utente pessima.
A peggiorare ancora di più, puoi fare davvero poco: Chrome attiva un evento popState prima dell'evento scroll, il che significa che puoi leggere la posizione di scorrimento corrente in popState e poi invertirla nel gestore di eventi scroll con window.scrollTo (ooh, ma almeno funziona!). Firefox, invece, attiva l'evento scroll prima del giorno popState, quindi non hai idea del valore precedente dello scorrimento per ripristinarlo. Bah!
Tuttavia, la buona notizia è che esiste una potenziale soluzione: history.scrollRestoration. Prende due valori stringa: auto, che mantiene tutto com'è oggi (e il suo valore predefinito), e manual, il che significa che tu, in qualità di sviluppatore, sarai tu a gestire le eventuali modifiche di scorrimento che potrebbero essere necessarie quando un utente attraversa la cronologia dell'app. Se necessario, puoi tenere traccia della posizione di scorrimento man mano che esegui il push delle voci della cronologia con history.pushState().
La funzionalità è nuova e sperimentale (per quanto fantastica), pertanto verifica che sia disponibile prima di utilizzarla:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
Troverai history.scrollRestoration da Chrome 46 e versioni successive, e puoi trovare le relative specifiche qui.
Non dimenticare di lasciare un feedback e comunica ad altri fornitori se vuoi che anche loro supportino scrollRestoration.