Listo para pruebas de desarrolladores: Contenedores de desplazamiento de un solo eje

Bramus
Free Debreuil
Free Debreuil
LinkedIn

Publicado: 4 de septiembre de 2026

La función "Contenedores de desplazamiento de un solo eje" extiende la propiedad overflow de CSS para admitir valores desplazables (auto, scroll, hidden) combinados con clip (por ejemplo, overflow: scroll clip), lo que genera contenedores de desplazamiento para un solo eje.

Si bien este cambio desbloquea funciones muy solicitadas, como el posicionamiento fijo por eje, también introduce efectos secundarios adicionales en otras funciones que dependen del desplazamiento. Debido a estos posibles riesgos de compatibilidad, les pedimos a los desarrolladores que prueben sus sitios web y proporcionen comentarios antes de que esta función se lance en los canales estables.

La función está disponible para pruebas de desarrolladores en Chrome 154 en los canales de versiones beta, para desarrolladores y Canary. No es necesario que actives ninguna marca.

La peculiaridad de establecer el desbordamiento en un eje

Sin esta función, era imposible crear un contenedor de desplazamiento de un solo eje con CSS. Si configuras un eje para que se desplace mientras intentas mantener visible el otro eje (por ejemplo, si configuras overflow-x: scroll y dejas overflow-y: visible), el motor de diseño del navegador fuerza automáticamente el eje visible para que se calcule en auto (o scroll). Esto crea un elemento de desplazamiento bidimensional, aunque no hayas tenido la intención de hacerlo.

Esta peculiaridad se hace muy visible cuando se intenta crear una tabla con una fila superior y una primera columna fijas. En el siguiente ejemplo, el objetivo es que la primera columna se adhiera al .table-wrapper que se desplaza horizontalmente y que la fila superior se adhiera al elemento de desplazamiento del documento.

<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 lo pruebas, notarás que no funciona. Esto se debe a la peculiaridad del desbordamiento que se describió anteriormente: el .table-wrapper se convierte en un desplazador bidimensional. Por lo tanto, cuando position: sticky busca el desplazador principal más cercano para cada eje, el resultado es el elemento .table-wrapper en ambos casos.

Demostración en directo

Grabación de la demostración:

Los contenedores de desplazamiento de un solo eje corrigen la peculiaridad

Con los contenedores de desplazamiento de un solo eje, puedes evitar explícitamente que ese eje secundario se convierta en un desplazador con clip. De esa manera, position: sticky puede hacer un seguimiento de dos contenedores de desplazamiento diferentes de forma independiente.

Para corregir el ejemplo de la tabla, combina el desplazamiento horizontal con overflow-y: clip.

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

O bien, con la abreviatura overflow:

.table-wrapper {
  overflow: auto clip;
}

De esta manera, el .table-wrapper solo actúa como un contenedor de desplazamiento para el eje X. La fila superior fija ahora la omitirá y se fijará correctamente al desplazador del documento en el eje Y, mientras que la primera columna seguirá fijándose al .table-wrapper de forma horizontal.

Si estás viendo esta publicación en un navegador compatible, puedes verla en acción en la siguiente demostración:

Demostración en directo

Grabación de la demostración:

Comportamientos afectados

Dado que los contenedores de desplazamiento de un solo eje cambian la forma en que se evalúan y crean los contextos de desplazamiento, es posible que notes cambios en otras funciones que dependen de los contenedores de desplazamiento, como las siguientes:

  • position: sticky: Como se muestra, los elementos ahora se adherirán correctamente dentro de los contenedores de desplazamiento de un solo eje, lo que mejorará el comportamiento de los elementos restringidos por overflow: clip en un eje.
  • overscroll-behavior: Dado que ahora un elemento puede ser un contenedor de desplazamiento en un solo eje, es posible que overscroll-behavior ya no se active en el eje recortado, lo que podría afectar los efectos personalizados de desplazamiento para actualizar o de rebote. Este cambio en el comportamiento coincide con Firefox y Safari.
  • Desplazamiento programático: Llamar a las APIs de desplazamiento (como Element.scrollTo()) en un contenedor de desplazamiento de un solo eje ahora aplica restricciones de desplazamiento programático. El elemento se negará a desplazarse de forma programática a lo largo del eje definido como clip.
  • Tamaño mínimo de celda de cuadrícula y flexible: En el caso de los contenedores de desplazamiento en el diseño de cuadrícula y flexible, el tamaño mínimo predeterminado (min-width: auto) normalmente se ignora para permitir que las celdas se ajusten al espacio disponible. Cuando overflow: clip se establece en el mismo eje, el tamaño mínimo predeterminado comenzará a tener un efecto, lo que podría hacer que el contenedor flexible o de cuadrícula crezca.

Detección de características

Para detectar la compatibilidad con contenedores de desplazamiento de un solo eje, consulta la regla @supports named-feature() con la palabra clave single-axis-scroll-container.

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

Como se analizó en el problema #13677 del CSSWG, usar named-feature(single-axis-scroll-container) es la forma estándar recomendada de detectar esta capacidad, ya que la verificación con @supports (overflow: scroll clip) por sí sola es solo una verificación de análisis, que no detecta si el navegador controla los comportamientos de desplazamiento revisados de un solo eje correctamente o no.

En JavaScript, usa CSS.supports("named-feature(single-axis-scroll-container)") para realizar esta verificación.

Comparte tus comentarios

Para evaluar los posibles riesgos de compatibilidad, se realizaron pruebas en 190 sitios web. Según este análisis, los cambios no parecen introducir interrupciones significativas.

Sin embargo, debido a que los contenedores de desplazamiento de un solo eje alteran fundamentalmente la forma en que se evalúan los contextos de desplazamiento, se está lanzando una red más amplia. Se te pedirá que pruebes sitios web y aplicaciones web en los canales de Chrome no estables para ayudar a identificar cualquier caso límite antes de que esta función se lance en la versión estable.

Si las cosas comienzan a fallar o si experimentas un comportamiento de desplazamiento inesperado, informa un error de Chromium.