Prêt pour les tests des développeurs : conteneurs de défilement à un seul axe

Bramus
Free Debreuil
Free Debreuil
LinkedIn

Publié le 4 septembre 2026

La fonctionnalité "Conteneurs de défilement à axe unique" étend la propriété CSS overflow pour prendre en charge les valeurs de défilement (auto, scroll, hidden) combinées à clip (par exemple, overflow: scroll clip), ce qui génère des conteneurs de défilement pour un seul axe.

Bien que cette modification débloque des fonctionnalités très demandées, telles que le positionnement fixe par axe, elle introduit également des effets secondaires supplémentaires dans d'autres fonctionnalités dépendantes du défilement. En raison de ces risques potentiels de compatibilité, nous demandons aux développeurs de tester leurs sites Web et de nous faire part de leurs commentaires avant le déploiement de cette fonctionnalité sur les canaux stables.

La fonctionnalité est disponible pour les tests des développeurs dans Chrome 153 sur les canaux de version bêta, en développement et Canary release channels. Vous n'avez pas besoin d'activer d'indicateur.

Le problème lié à la définition du débordement sur un axe

Sans cette fonctionnalité, il était impossible de créer un conteneur de défilement à axe unique avec CSS. Si vous configurez un axe pour qu'il défile tout en essayant de garder l'autre axe visible (par exemple, en définissant overflow-x: scroll et en laissant overflow-y: visible), le moteur de style du navigateur force automatiquement l'axe visible à calculer sur auto (ou scroll). Cela crée un défilement bidimensionnel, même si vous ne l'avez pas prévu.

Ce problème devient très visible lorsque vous essayez de créer un tableau avec une ligne supérieure fixe et une première colonne fixe. Dans l'exemple suivant, l'objectif est que la première colonne reste fixe sur le .table-wrapper qui défile horizontalement, et que la ligne supérieure reste fixe sur le défilement du document.

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    …
  </table>
</div>

/* Scroll horizontally */
.table-wrapper {
  overflow-x: auto;
}

/* Sticky top row */
.table-wrapper thead {
  position: sticky;
  top: 0;
}

/* Sticky first column */
.table-wrapper td:first-child {
  position: sticky;
  left: 0;
}

Si vous essayez, vous remarquerez que cela ne fonctionne pas. Cela est dû au problème de débordement décrit précédemment : le .table-wrapper devient effectivement un défilement bidimensionnel. Ainsi, lorsque position: sticky recherche le défilement ancêtre le plus proche pour chaque axe, le résultat est l'élément .table-wrapper dans les deux cas.

Démonstration en direct

Enregistrement de la démonstration

Les conteneurs de défilement à axe unique corrigent le problème

Avec les conteneurs de défilement à axe unique, vous pouvez explicitement empêcher cet axe secondaire de devenir un défilement à l'aide de clip. Ainsi, position: sticky peut suivre deux conteneurs de défilement différents indépendamment.

Pour corriger l'exemple de tableau, associez le défilement horizontal à overflow-y: clip.

.table-wrapper {
  overflow-x: auto;
  overflow-y: clip;
}

Ou, en utilisant le raccourci overflow :

.table-wrapper {
  overflow: auto clip;
}

Ainsi, le .table-wrapper ne fait office de conteneur de défilement que pour l'axe X. La ligne supérieure fixe le contournera et restera correctement fixe sur le défilement du document sur l'axe Y, tandis que la première colonne continuera de rester fixe sur le .table-wrapper horizontalement.

Si vous consultez cet article dans un navigateur compatible, vous pouvez le voir en action dans la démonstration suivante :

Démonstration en direct

Enregistrement de la démonstration

Comportements concernés

Étant donné que les conteneurs de défilement à axe unique modifient la façon dont les contextes de défilement sont évalués et créés, vous pouvez remarquer des modifications dans d'autres fonctionnalités qui dépendent des conteneurs de défilement, telles que :

  • position: sticky: comme indiqué, les éléments resteront désormais correctement fixes dans les conteneurs de défilement à axe unique, ce qui améliorera les comportements des éléments limités par overflow: clip sur un axe.
  • overscroll-behavior: étant donné qu'un élément peut désormais être un conteneur de défilement sur un seul axe, overscroll-behavior peut ne plus se déclencher sur l'axe rogné, ce qui peut affecter les effets personnalisés de type "pull-to-refresh" ou de rebond. Cette modification de comportement correspond à Firefox et Safari.
  • Défilement programmatique : l'appel d'API de défilement (comme Element.scrollTo()) sur un conteneur de défilement à axe unique applique désormais des contraintes de défilement programmatiques. L'élément refusera de défiler de manière programmatique le long de l'axe défini comme clip.
  • Dimensionnement minimal des cellules de grille et de flex : pour les conteneurs de défilement dans une mise en page de grille et de flex, la taille minimale par défaut (min-width: auto) est normalement ignorée pour permettre aux cellules de s'adapter à l’espace disponible. Lorsque overflow: clip est défini sur le même axe, la taille minimale par défaut commence à avoir un effet, ce qui peut entraîner une augmentation de la taille du conteneur flex ou de grille.

Détection de fonctionnalités

Pour détecter la prise en charge des conteneurs de défilement à axe unique, interrogez la @supports named-feature() règle à l'aide du single-axis-scroll-container mot clé.

@supports named-feature(single-axis-scroll-container) {
  /* Feature is supported */
}

Comme indiqué dans le problème CSSWG #13677, l'utilisation de named-feature(single-axis-scroll-container) est la méthode standard recommandée pour détecter cette fonctionnalité, car la vérification à l'aide de @supports (overflow: scroll clip) seule est une vérification d'analyse, qui ne détecte pas si le navigateur gère correctement ou non les comportements de défilement à axe unique révisés.

En JavaScript, utilisez CSS.supports("named-feature(single-axis-scroll-container)") pour effectuer cette vérification.

Nous aimerions avoir votre avis

Pour évaluer les risques potentiels de compatibilité, des tests ont été effectués sur 190 sites Web. D'après cette analyse, les modifications ne semblent pas introduire de problèmes importants.

Toutefois, étant donné que les conteneurs de défilement à axe unique modifient fondamentalement la façon dont les contextes de défilement sont évalués, un réseau plus large est en cours de diffusion. Nous vous demandons de tester les sites Web et les applications Web sur les canaux Chrome non stables pour identifier les cas extrêmes avant le déploiement de cette fonctionnalité sur les canaux stables.

Si vous rencontrez des problèmes ou un comportement de défilement inattendu, veuillez signaler un bug Chromium.