Memorisieren Sie die Scrollposition über Seitenladungen

Dieser clevere UX -Tweak, der von Hakim El Hattab auf Twitter geteilt wird, verbessert statische Websites mit scrollbaren Navigations Seitenleisten. Das Geheimnis? Verwenden von localStorage , um die Bildlaufposition zu erinnern und wiederherzustellen.

Vor dem Verlassen einer Seite speichert das Skript die Bildlaufposition der Seitenleiste in localStorage . Auf der Ladeseite holt es diesen Wert ab und legt die Scrollposition der Seitenleiste entsprechend fest. Hier ist der prägnante JavaScript -Code:

 Sei SideBar = document.querySelector (". Sidebar");

sei top = localStorage.getItem ("Sidebar-Scroll");
if (top! == null) {
  SideBar.Scrolltop = ParseInt (Top, 10);
}

window.adDeVentListener ("voraberladen", () => {
  LocalStorage.SetItem ("Sidebar-Scroll", Sidebar.Scrolltop);
});

Interessanterweise vermeidet diese Methode den "Blitz der falschen Bildlaufposition", die häufig mit ähnlichen Techniken verbunden sind. Der Grund für diese Glätte bleibt unklar, möglicherweise im Zusammenhang mit Browser -Optimierungen im Lackmanagement.

Das obige ist der detaillierte Inhalt vonMemorisieren Sie die Scrollposition über Seitenladungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!