Utiliser l'API History pour gérer vos URL est pratique. En l'occurrence, il s'agit d'une fonctionnalité essentielle pour les applications Web de qualité. 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 se traduit souvent par des sauts disgracieux à mesure que 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 aggraver la situation, 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 cela fonctionne). Toutefois, Firefox déclenche 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: history.scrollRestoration. Elle accepte deux valeurs de chaîne: auto, qui conserve tout ce qu'il est aujourd'hui (et qui est sa valeur par défaut), et manual, qui signifie que vous, en tant que développeur, devenez propriétaire de toutes les modifications de défilement nécessaires 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 de l'historique avec history.pushState().
Cette fonctionnalité est nouvelle et expérimentale (bien que totalement géniale). Vérifiez 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. Vous pouvez consulter ses caractéristiques ici.
N'oubliez pas de nous faire part de vos commentaires et d'indiquer aux autres fournisseurs si vous souhaitez qu'ils prennent également en charge scrollRestoration.