L'utilisation de l'API History pour gérer vos URL est très pratique et constitue une fonctionnalité essentielle des applications Web de qualité. Toutefois, l'un de ses inconvénients est que les positions de défilement sont stockées et, surtout, restaurées à chaque fois que vous parcourez l'historique. Cela se traduit souvent par des sauts disgracieux 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 conduit à une expérience utilisateur horrible.
Pour ne rien arranger, 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 ça marche !). En revanche, Firefox déclenche l'événement scroll avant popState. Vous n'avez donc aucune idée de l'ancienne valeur de défilement pour la restaurer. Bah!
Heureusement, il existe une solution potentielle: history.scrollRestoration. Elle accepte deux valeurs de chaîne: auto, qui conserve tous les éléments tels qu'ils sont aujourd'hui (et est sa valeur par défaut) et manual, ce qui signifie que vous, en tant que développeur, assumez la responsabilité 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 transmettez des entrées d'historique avec history.pushState().
Cette fonctionnalité est nouvelle et expérimentale (bien que totalement géniale). Assurez-vous donc 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 dans Chrome 46 et versions ultérieures. Cliquez ici pour consulter ses caractéristiques.
N'oubliez pas de nous envoyer vos commentaires et d'indiquer aux autres fournisseurs s'ils souhaitent qu'ils prennent également en charge scrollRestoration.