Die Verwaltung Ihrer URLs mit der History API ist praktisch und unverzichtbar für gute Webanwendungen. Einer der Nachteile ist jedoch, dass die Scrollpositionen gespeichert und vor allem bei jedem Durchlauf des Verlaufs wiederhergestellt werden. Dies bedeutet häufig ein unansehnliches Sprung, wenn sich die Scrollposition automatisch ändert. Dies gilt insbesondere dann, wenn Ihre App Übergänge durchführt oder den Inhalt der Seite in irgendeiner Weise ändert. Dies führt letztlich zu einer schlechten User Experience.
Und was noch schlimmer ist: Sie können kaum etwas unternehmen: Chrome löst vor dem scroll-Ereignis ein popState-Ereignis aus. Das bedeutet, dass Sie die aktuelle Scrollposition in popState lesen und sie dann im scroll-Event-Handler mit window.scrollTo umkehren können (Ewww, aber es funktioniert zumindest). Firefox löst jedoch das scroll-Ereignis vor popState aus, sodass Sie den alten Scrollwert nicht kennen, um ihn wiederherzustellen. Bah!
Die gute Nachricht ist jedoch, dass es eine mögliche Lösung gibt: history.scrollRestoration. Es werden zwei Stringwerte verwendet: auto, wodurch alles so bleibt (der Standardwert ist) und manual, was bedeutet, dass Sie als Entwickler die Verantwortung für alle Scroll-Änderungen übernehmen, die erforderlich sind, wenn ein Nutzer den Verlauf der App durchläuft. Bei Bedarf können Sie die Scrollposition verfolgen, während Sie Verlaufseinträge mit history.pushState() senden.
Die Funktion ist neu und experimentell, wenn auch absolut genial. Prüfen Sie daher unbedingt, ob sie verfügbar ist, bevor Sie sie verwenden:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
history.scrollRestoration ist ab Chrome 46 verfügbar. Die Spezifikationen finden Sie hier.
Bitte gib uns Feedback und lass andere Anbieter wissen, ob sie scrollRestoration ebenfalls unterstützen sollen.