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

Bramus
Free Debreuil
Free Debreuil
LinkedIn

Fecha de publicación: 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 da como resultado 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 a los canales estables.

La función está disponible para pruebas de desarrolladores en Chrome 153 en los canales de versiones beta, para desarrolladores y Canary release channels. No es necesario activar una marca.

La peculiaridad de configurar 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 estilo del navegador fuerza automáticamente el eje visible para que se calcule en auto (o scroll). Esto crea un desplazador bidimensional, aunque no tenías la intención de hacerlo.

Esta peculiaridad se vuelve muy visible cuando se intenta crear una tabla con una fila superior fija y una primera columna fija. 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 desplazador 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 de desbordamiento descrita anteriormente: el .table-wrapper se convierte en un desplazador bidimensional. Por lo tanto, cuando position: sticky busca el desplazador superior 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, vincula el desplazamiento horizontal con overflow-y: clip.

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

O bien, usa 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 lo omitirá y se adherirá correctamente al desplazador del documento en el eje y, mientras que la primera columna seguirá adherida al .table-wrapper horizontalmente.

Si consultas 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 mejora los comportamientos de los elementos restringidos por overflow: clip en un eje.
  • overscroll-behavior: Dado que un elemento ahora 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 extracción para actualizar o 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 celdas de cuadrícula y flexbox: Para los contenedores de desplazamiento en el diseño de cuadrícula y flexbox, el tamaño mínimo predeterminado (min-width: auto) normalmente se ignora para permitir que las celdas se ajusten al espacio disponible. Cuando se establece overflow: clip en el mismo eje, el tamaño mínimo predeterminado comenzará a tener un efecto, lo que podría hacer que el contenedor de flexbox o cuadrícula crezca.

Detección de funciones

Para detectar la compatibilidad con los 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 explica en el problema #13677 de CSSWG, usar named-feature(single-axis-scroll-container) es la forma estándar recomendada para 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 de un solo eje revisados 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 ninguna interrupción significativa.

Sin embargo, dado 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. Te pedimos que pruebes sitios web y aplicaciones web en los canales de Chrome no estables para ayudar a identificar cualquier caso extremo antes de que esta función se lance a la versión estable.

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