Utilizzare l'API History per gestire gli URL è fantastico e, in un dato momento, è una funzionalità fondamentale di buone app web. Uno dei suoi svantaggi, tuttavia, è che le posizioni di scorrimento vengono memorizzate e, soprattutto, ripristinate ogni volta che visiti la cronologia. Questo spesso comporta salti antiestetici quando la posizione di scorrimento cambia automaticamente, soprattutto se l'app effettua transizioni o modifica in qualsiasi modo i contenuti della pagina. In definitiva, ciò porta a un'esperienza utente pessima.
Inoltre, c'è ben poco che puoi fare al riguardo: Chrome attiva un evento popState prima dell'evento scroll, il che significa che puoi leggere l'attuale posizione di scorrimento in popState e quindi invertirla nel gestore di eventi scroll con window.scrollTo (Ewww, ma almeno funziona!). Firefox, tuttavia, attiva l'evento scroll prima del giorno popState, quindi non hai idea del valore di scorrimento precedente per ripristinarlo. Bah!
La buona notizia è, tuttavia, che esiste una potenziale correzione: history.scrollRestoration. Prende due valori stringa: auto, che conserva tutto ciò che è oggi (ed è il suo valore predefinito), e manual, che significa che in qualità di sviluppatore assumi la proprietà di eventuali modifiche di scorrimento che potrebbero essere necessarie quando un utente esplora la cronologia dell'app. Se necessario, puoi tenere traccia della posizione di scorrimento mentre esegui il push delle voci della cronologia con history.pushState().
Si tratta di una funzionalità nuova e sperimentale (sebbene fantastica), perciò assicurati che sia disponibile prima di utilizzarla:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
Troverai history.scrollRestoration in Chrome 46 e versioni successive e puoi trovarne le specifiche qui.
Non dimenticare di lasciarci il tuo feedback e di far sapere agli altri fornitori se vuoi che anche loro supportino scrollRestoration.