Die History API zur Verwaltung Ihrer URLs zu verwenden, ist eine tolle Sache und eine wichtige Funktion guter Web-Apps. Einer der Nachteile besteht jedoch darin, dass die Scrollpositionen gespeichert und dann, was noch wichtiger ist, wiederhergestellt werden, wenn Sie den Verlauf durchgehen. Das führt oft zu unschönen Sprüngen, da sich die Scrollposition automatisch ändert. Das ist vor allem dann der Fall, wenn Ihre App Übergänge ausführt oder den Inhalt der Seite in irgendeiner Weise ändert. Letztendlich führt dies zu einer schlechten Nutzererfahrung.
Und das Schlimmste: Sie können nicht viel dagegen tun: Chrome löst das popState-Ereignis vor dem scroll-Ereignis aus. Das bedeutet, dass Sie die aktuelle Scrollposition in popState lesen und dann im scroll-Ereignishandler mit window.scrollTo rückgängig machen können. Ewww, aber zumindest funktioniert es. In Firefox wird das Ereignis scroll jedoch vor popState ausgelöst. Sie haben also keine Ahnung, wie der alte Scrollwert lautet, um ihn wiederherzustellen. Pfui!
Es gibt jedoch eine mögliche Lösung: history.scrollRestoration. Es werden zwei Stringwerte verwendet: auto, bei dem alles unverändert bleibt (Standardwert), und manual, was bedeutet, dass Sie als Entwickler für alle Scrolländerungen verantwortlich sind, die erforderlich sein können, wenn ein Nutzer den Verlauf der App durchläuft. Wenn Sie möchten, können Sie die Scrollposition im Blick behalten, während Sie mit history.pushState() Verlaufseinträge aufrufen.
Die Funktion ist neu und experimentell (aber absolut genial). Prüfe daher, ob sie verfügbar ist, bevor du sie verwendest:
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.
Vergiss nicht, uns Feedback zu geben und anderen Anbietern mitzuteilen, dass du möchtest, dass sie scrollRestoration auch unterstützen.