Hakim El Hattab tweetete eine wirklich nette kleine UX-Verbesserung für eine statische Seite mit einer scrollbaren Navigationsleiste.
Der Trick besteht darin, die Scrollposition kurz vor dem Verlassen der Seite in localStorage zu speichern und beim Laden diesen Wert abzurufen und dorthin zu scrollen. Ich werde ihn aus dem Tweet abtippen…
let sidebar = document.querySelector(".sidebar");
let top = localStorage.getItem("sidebar-scroll");
if (top !== null) {
sidebar.scrollTop = parseInt(top, 10);
}
window.addEventListener("beforeunload", () => {
localStorage.setItem("sidebar-scroll", sidebar.scrollTop);
});Was überrascht, ist, dass man keinen kurzzeitigen Flimmer der falschen Scrollposition hat. Ich frage mich, warum? Vielleicht hat es mit dem "fancy paint" zu tun, das Browser inzwischen verwenden? Bin mir nicht sicher.
Diese Tricks, die Ihre statische Seite wie eine Single-Page "App" verhalten lassen, sind großartig. Dies sollte gut mit Tools wie Turbolinks/Quicklink funktionieren.
Wenn Sie möchten, dass dieser Trick auch in mobilen Browsern funktioniert, verwenden Sie besser das visibilitychange-Ereignis anstelle von beforeunload (das auf Mobilgeräten nicht ausgelöst wird).
Vielleicht möchten Sie auch die aktuelle Zeit speichern und diese beim Neuladen überprüfen. Wenn der Benutzer Ihre Website eine Woche später wieder besucht, möchte er wahrscheinlich nicht zu einer zufälligen Scrollposition springen.
history.replaceState + history.state object + beforeunload event kann auch ein cooler Ansatz sein
Wenn ich mich nicht irre, wird dies für alle Seiten aktiviert. Sie müssen möglicherweise einen Namespace (z. B. aus dem
location.pathname) für denlocalStorage-Schlüssel festlegen, um sicherzustellen, dass die Scroll-Wiederherstellung nur für diese Seite angewendet wird.Wir könnten auch eine Benachrichtigungsleiste am oberen Rand der Seite hinzufügen, die dem Benutzer erlaubt zu wählen, ob er scrollen möchte oder nicht. So etwas Ähnliches macht Microsoft Word, wenn ein langes Dokument mit einer nicht-null-Scrollposition wieder geöffnet wird, wenn es geschlossen wurde.
Vielleicht können Sie diesen Code ausprobieren.
Hallo, ich bin irgendwie ein Noob und bin wirklich an dieser Funktionalität interessiert... Ich habe versucht, den Code in den meiner Seite zwischen und einzufügen, aber es scheint nicht zu funktionieren...
Könnte mir jemand ein Beispiel geben, wie man ihn benutzt?
Viele Grüße :)