Die Verlaufs-API zur Verwaltung von URLs ist genial und – wie dies gerade passiert – eine entscheidende Funktion guter Web-Apps. Einer der Nachteile ist jedoch, dass die Scrollpositionen gespeichert und, was noch wichtiger ist, bei jedem Durchlauf des Verlaufs wiederhergestellt werden. Dies bedeutet oft unansehnliche Sprünge, da 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 letztendlich zu einer schlechten User Experience.
Um es noch schlimmer zu machen, können Sie kaum etwas dagegen unternehmen: Chrome löst ein popState-Ereignis vor dem scroll-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 (Eh, aber es funktioniert zumindest!). Firefox löst jedoch das scroll-Ereignis vor popState aus. Sie wissen also nicht, wie der alte Scroll-Wert wiederhergestellt werden kann. Pah!
Die gute Nachricht ist, dass es eine mögliche Lösung gibt: history.scrollRestoration. Es werden zwei Stringwerte verwendet: auto, mit dem alles so bleibt (und der Standardwert ist), und manual, bei dem Sie als Entwickler die Inhaberschaft für alle Scroll-Änderungen übernehmen, die möglicherweise erforderlich sind, wenn ein Nutzer den Verlauf der App durchläuft. Bei Bedarf können Sie die Scrollposition verfolgen, wenn Sie Verlaufseinträge mit history.pushState() übertragen.
Die Funktion ist neu und experimentell (wenn auch wirklich fantastisch). Sehen Sie sich daher die Verfügbarkeit an, 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 Spezifikation finden Sie hier.
Wir freuen uns über Ihr Feedback und lassen Sie andere Anbieter wissen, ob sie scrollRestoration ebenfalls unterstützen sollen.