Het gebruik van de History API om uw URL’s te beheren is geweldig en, toevallig, een cruciaal kenmerk van goede webapps. Een van de nadelen is echter dat de scrollposities worden opgeslagen en vervolgens, nog belangrijker, worden hersteld wanneer je door de geschiedenis bladert. Dit betekent vaak lelijke sprongen als de scrollpositie automatisch verandert, en vooral als uw app overgangen maakt of de inhoud van de pagina op welke manier dan ook verandert. Uiteindelijk leidt dit tot een vreselijke gebruikerservaring.
Om het nog erger te maken, kun je er heel weinig aan doen: Chrome activeert een popState -gebeurtenis vóór de scroll -gebeurtenis, wat betekent dat je de huidige scroll-positie in popState kunt lezen en deze vervolgens kunt omkeren in de scroll -gebeurtenishandler met window.scrollTo (Ewww , maar het werkt tenminste!). Firefox activeert de scroll gebeurtenis echter vóór popState , dus u hebt geen idee wat de oude scroll-waarde was om deze te herstellen. Bah!
Het goede nieuws is echter dat er een mogelijke oplossing is: history.scrollRestoration . Er zijn twee tekenreekswaarden nodig: auto , waarmee alles blijft zoals het nu is (en de standaardwaarde is), en manual , wat betekent dat u als ontwikkelaar eigenaar wordt van eventuele scrollwijzigingen die nodig kunnen zijn wanneer een gebruiker de app's doorloopt geschiedenis. Als dat nodig is, kunt u de schuifpositie bijhouden terwijl u geschiedenisitems pusht met history.pushState() .
De functie is nieuw en experimenteel (hoewel absoluut geweldig), dus zorg ervoor dat u controleert of deze beschikbaar is voordat u deze gebruikt:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
Je vindt history.scrollRestoration in Chrome 46 en hoger, en je kunt de specificaties hier vinden .
Vergeet niet om feedback achter te laten en andere leveranciers te laten weten of u wilt dat zij scrollRestoration ook ondersteunen.