L'utilisation de l'API History pour gérer vos URL est une fonctionnalité essentielle des bonnes applications Web. Cependant, l'un de ses inconvénients est que les positions de défilement sont stockées, puis, plus important encore, restaurées chaque fois que vous parcourez l'historique. Cela entraîne souvent des sauts inesthétiques lorsque la position de défilement change automatiquement, en particulier si votre application effectue des transitions ou modifie le contenu de la page de quelque manière que ce soit. En fin de compte, cela entraîne une expérience utilisateur horrible.
Pour aggraver les choses, vous ne pouvez pas faire grand-chose: Chrome déclenche un événement popState avant l'événement scroll, ce qui signifie que vous pouvez lire la position de défilement actuelle dans popState, puis l'inverser dans le gestionnaire d'événements scroll avec window.scrollTo (Ewww, mais au moins ça marche !). Firefox déclenche toutefois l'événement scroll avant popState. Vous ne savez donc pas quelle était l'ancienne valeur de défilement pour la restaurer. Bah !
La bonne nouvelle, c'est qu'il existe une solution potentielle: history.scrollRestoration. Il prend deux valeurs de chaîne: auto, qui conserve tout tel qu'il est aujourd'hui (et qui est sa valeur par défaut), et manual, ce qui signifie que vous, en tant que développeur, prendrez la propriété de toutes les modifications de défilement qui peuvent être requises lorsqu'un utilisateur parcourt l'historique de l'application. Si nécessaire, vous pouvez suivre la position de défilement lorsque vous envoyez des entrées d'historique avec history.pushState().
Cette fonctionnalité est nouvelle et expérimentale (mais vraiment géniale). Assurez-vous qu'elle est disponible avant de l'utiliser:
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
history.scrollRestoration est disponible à partir de Chrome 46. Vous pouvez consulter sa spécification ici.
N'oubliez pas de nous envoyer vos commentaires et d'indiquer aux autres fournisseurs si vous souhaitez qu'ils acceptent également scrollRestoration.