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 permet de créer 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 de compatibilité potentiels, nous demandons aux développeurs de tester leurs sites Web et de nous faire part de leurs commentaires avant que cette fonctionnalité ne soit déployée sur les canaux stables.

Cette fonctionnalité est disponible pour les tests des développeurs dans Chrome 154 sur les versions bêta, de développement et Canary. Vous n'avez pas besoin d'activer de flag.

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 à un seul axe 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 auto (ou scroll). Cela crée un défilement bidimensionnel, même si vous ne le vouliez pas.

Ce problème devient très visible lorsque vous essayez de créer un tableau avec une première ligne et une première colonne fixes. 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 première ligne 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û à l'étrangeté de débordement décrite précédemment : .table-wrapper devient effectivement un défilement bidimensionnel. Ainsi, lorsque position: sticky recherche le défileur 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 à défilement sur un seul axe corrigent l'étrangeté

Avec les conteneurs de défilement à axe unique, vous pouvez empêcher explicitement cet axe secondaire de devenir un élément de défilement à l'aide de clip. De cette façon, position: sticky peut suivre deux conteneurs de défilement différents de manière indépendante.

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

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

Vous pouvez également utiliser le raccourci overflow :

.table-wrapper {
  overflow: auto clip;
}

Ainsi, .table-wrapper ne sert que de conteneur de défilement pour l'axe X. La ligne supérieure fixe l'ignore désormais et se fixe correctement au défilement du document sur l'axe Y, tandis que la première colonne continue de se fixer à .table-wrapper horizontalement.

Si vous consultez cet article dans un navigateur compatible, vous pouvez voir cette fonctionnalité 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 constater des changements dans d'autres fonctionnalités qui s'appuient sur les conteneurs de défilement, comme :

  • position: sticky : comme indiqué, les éléments restent désormais correctement dans les conteneurs de défilement à un seul axe, ce qui améliore le comportement des éléments contraints 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 coupé, ce qui peut affecter les effets personnalisés de type "pull-to-refresh" ou de rebond. Ce changement de comportement correspond à celui de 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 les contraintes de défilement programmatique. L'élément refusera de défiler de manière programmatique le long de l'axe défini comme clip.
  • Taille minimale des cellules de grille et Flex : pour les conteneurs de défilement dans une mise en page en grille ou 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 l'agrandissement du conteneur flex ou grille.

Détection de caractéristiques

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

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

Comme indiqué dans le problème 13677 du CSSWG, l'utilisation de named-feature(single-axis-scroll-container) est la méthode standard recommandée pour détecter cette fonctionnalité. En effet, la vérification à l'aide de @supports (overflow: scroll clip) seul ne permet que de vérifier l'analyse syntaxique, et non de déterminer si le navigateur gère correctement les comportements de défilement mono-axe 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 entraîner de problèmes majeurs.

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 filet plus large est déployé. Vous êtes invité à tester des sites Web et des applications Web sur les canaux Chrome non stables pour identifier les cas extrêmes avant le déploiement de cette fonctionnalité dans la version stable.

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