Résoudre les sauts d'affichage : Déboguer le scroll anchoring lors d'un prepend de flux

Vous avez sans doute déjà rencontré ce cas d'école : vous développez une messagerie instantanée ou un flux inversé où les anciens messages se chargent au fur et à mesure que l'utilisateur remonte dans l'historique. Tout fonctionne en local, jusqu'au moment où l'insertion des nouveaux éléments au sommet de la liste provoque un sursaut visuel brutal. La position de lecture saute, frustrant immédiatement l'utilisateur.

Ce phénomène découle souvent d'une mauvaise cohabitation entre les scripts de gestion de l'affichage et le mécanisme natif des navigateurs : le Scroll Anchoring.

Comprendre le rôle du Scroll Anchoring

Introduit pour contrer les décalages de mise en page causés par le chargement tardif d'images ou de bannières publicitaires, le scroll anchoring ajuste automatiquement la position de défilement pour maintenir le contenu visible à l'écran. Par défaut, la propriété CSS overflow-anchor est active sur les conteneurs scrollables.

Le problème surgit lorsque vous insérez dynamiquement des nœuds dans le DOM au-dessus du viewport (l'opération de prepend). Deux scénarios problématiques se produisent alors fréquemment :

• Le conflit de compensation : Votre code JavaScript calcule la hauteur des éléments insérés et modifie manuellement la propriété scrollTop alors que le navigateur tente simultanément d'ajuster l'ancrage. Résultat : une double compensation qui propulse l'utilisateur trop bas.
• Le mauvais choix d'ancre : L'algorithme du navigateur sélectionne un élément instable comme point d'ancrage (une image non chargée, un élément animé ou un conteneur temporaire dont les dimensions mutent subitement).

La checklist pour traquer l'anomalie

Avant d'ajouter du code correctif complexe, il convient d'analyser le comportement natif du navigateur grâce aux DevTools :

1. Visualiser l'élément d'ancrage : Dans Chrome DevTools, ouvrez le panneau Rendering et cochez l'option Scroll Anchoring Target. Vous verrez immédiatement en surbrillance l'élément que le moteur de rendu tente de maintenir immobile.

2. Identifier les modifications de taille asynchrones : Assurez-vous que les éléments préfixés ont des dimensions réservées. Si un élément inséré contient une image sans attributs width et height ou sans règle aspect-ratio, sa hauteur changera après l'évaluation du scroll anchor, provoquant un second décalage inévitable.

Deux approches pour stabiliser le flux

Selon l'architecture de votre application, deux stratégies permettent d'éradiquer ces soubresauts :

Approche 1 : Faire confiance au navigateur (zéro JS pour le scroll)
Si vous préfixez des éléments entièrement stylisés et dimensionnés de manière déterministe, laissez faire le moteur de rendu. N'ajoutez aucun calcul manuel de scrollTop. Laissez overflow-anchor: auto faire son travail d'ajustement silencieux.

Approche 2 : Reprendre le contrôle total (manuel et prévisible)
Si votre flux contient des éléments dynamiques ou complexes, désactivez le comportement natif sur le conteneur scrollable :

.feed-container { overflow-anchor: none; }

Dès lors, le navigateur n'interfère plus. Vous devez enregistrer la hauteur totale du conteneur avant la mutation (scrollHeight), insérer vos nœuds, puis réajuster immédiatement le défilement :

const delta = container.scrollHeight - previousHeight;
container.scrollTop += delta;

En neutralisant les suppositions de l'algorithme natif, vous garantissez un comportement rigoureusement identique sur l'ensemble des navigateurs, tout en gardant une interface fluide et agréable à explorer.