Propriété CSS overflow-anchor

La propriété CSS overflow-anchor contrôle si la fonctionnalité d'ancrage de défilement du navigateur s'applique à un élément. L'ancrage de défilement maintient votre position de lecture stable lorsque le contenu situé au-dessus du viewport change de taille, afin que la page ne saute pas sous vos yeux. La propriété overflow-anchor vous permet de désactiver ce comportement lorsqu'il pose problème.

Cette page explique ce que résout l'ancrage de défilement, les deux valeurs de overflow-anchor, quand le désactiver, et la prise en charge navigateur sur laquelle vous pouvez compter.

Ce que résout l'ancrage de défilement

Imaginez que vous lisez un article et qu'une publicité, une image ou un commentaire chargé en différé apparaît soudainement au-dessus de votre position de défilement actuelle. Sans ancrage de défilement, ce contenu nouvellement inséré repousse tout vers le bas et le texte que vous lisiez s'éloigne brusquement. C'est l'une des expériences les plus désagréables sur le web.

L'ancrage de défilement résout ce problème en choisissant un élément DOM proche du haut du viewport comme ancre, puis en ajustant le décalage de défilement après un changement de mise en page afin que cet élément ancré reste visuellement fixe. Vous continuez à lire la même ligne ; le contenu inséré se développe silencieusement au-dessus. Les navigateurs modernes activent cela par défaut — vous n'y pensez généralement pas car ça fonctionne tout seul.

overflow-anchor est votre porte de sortie. Elle ne pas active l'ancrage de défilement (il est déjà actif) ; elle vous permet seulement de le désactiver pour un sous-arbre où l'ajustement automatique pose des problèmes.

Valeurs de la propriété

overflow-anchor accepte deux valeurs réelles ainsi que les mots-clés CSS universels :

Notez que overflow-anchor n'est pas héritée par défaut, mais lui affecter none sur un ancêtre supprime effectivement l'ancrage pour tout ce sous-arbre.

Syntaxe

overflow-anchor: auto | none | initial | inherit;

Pour désactiver l'ancrage de défilement sur l'ensemble d'un document, appliquez none à la racine :

body {
  overflow-anchor: none;
}

Plus couramment, vous le limitez au seul conteneur qui pose problème :

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

Quand désactiver l'ancrage

La plupart du temps, vous devriez laisser l'ancrage activé — le désactiver réintroduit le problème de saut de contenu qu'il était conçu pour éviter. Utilisez overflow-anchor: none uniquement dans des cas précis :

• Défilement infini qui prépend des éléments. Une fenêtre de chat ou un fil « charger les messages plus anciens » qui insère du contenu en haut entre parfois en conflit avec l'ancrage. Si vous gérez manuellement la position de défilement avec JavaScript, l'ajustement automatique de l'ancrage peut sur-corriger et provoquer un saccade.
• Animations personnalisées de suivi du défilement. Si vous lisez scrollTop à chaque image pour piloter un effet parallaxe ou de progression, un ajustement d'ancrage peut introduire un décalage inattendu.
• Journaux « rester en bas » avec position fixe. Un journal de type terminal qui doit toujours afficher la ligne la plus récente en bas peut être plus facile à gérer sans interférence de l'ancrage.

Dans chacun de ces cas, testez d'abord avec l'ancrage activé — vous n'aurez peut-être pas besoin de le désactiver du tout.

Définir via JavaScript

Vous pouvez basculer l'ancrage à l'exécution via le DOM :

// Disable scroll anchoring on the feed container
const feed = document.querySelector(".live-feed");
feed.style.overflowAnchor = "none";

// Re-enable it later
feed.style.overflowAnchor = "auto";

Prise en charge navigateur et dégradation gracieuse

overflow-anchor (et l'ancrage de défilement lui-même) est pris en charge dans Chrome, Edge, Firefox et les autres navigateurs basés sur Chromium. Safari n'a historiquement pas implémenté l'ancrage de défilement, donc la propriété n'y a aucun effet — les pages se comportent simplement comme si l'ancrage était désactivé.

Étant donné que la propriété ne fait que supprimer un comportement agréable mais non essentiel, il n'y a rien à polyfiller et aucune solution de repli à écrire : dans les navigateurs non pris en charge, overflow-anchor: none est inoffensif et ignoré.

Propriétés associées

• overflow — le raccourci qui détermine si le contenu débordant est découpé, défilé ou visible.
• overflow-x et overflow-y — contrôlent le débordement sur chaque axe indépendamment.
• scroll-behavior — fait défiler (par exemple vers des ancres) de manière animée plutôt que par saut.
• position — s'associe aux mises en page sticky/fixed qui coexistent souvent avec les régions défilables.

Pratique