Pronto para testes de desenvolvedores: contêineres de rolagem de eixo único

Bramus
Free Debreuil
Free Debreuil
LinkedIn

Publicado em: 4 de setembro de 2026

O recurso "contêineres de rolagem de eixo único" estende a propriedade CSS overflow para oferecer suporte a valores roláveis (auto, scroll, hidden) combinados com clip (por exemplo, overflow: scroll clip), resultando em contêineres de rolagem para apenas um eixo.

Embora essa mudança desbloqueie recursos muito solicitados, como o posicionamento fixo por eixo, ela também introduz efeitos colaterais extras em outros recursos dependentes da rolagem. Devido a esses possíveis riscos de compatibilidade, pedimos aos desenvolvedores que testem os sites e enviem feedback antes que o recurso seja lançado nos canais estáveis.

O recurso está disponível para testes de desenvolvedores no Chrome 154 nos canais de lançamento Beta, Dev e Canary. Não é necessário ativar uma flag.

A peculiaridade de definir o estouro em um eixo

Sem esse recurso, era impossível criar um contêiner de rolagem de eixo único com CSS. Se você configurar um eixo para rolar enquanto tenta manter o outro visível (por exemplo, definindo overflow-x: scroll e deixando overflow-y: visible), o mecanismo de estilo do navegador vai forçar automaticamente o eixo visível a calcular auto (ou scroll). Isso cria um controle de rolagem bidimensional, mesmo que não seja sua intenção.

Essa peculiaridade fica muito visível ao tentar criar uma tabela com uma linha superior fixa e uma primeira coluna fixa. No exemplo a seguir, o objetivo é que a primeira coluna fique fixada no .table-wrapper que rola horizontalmente, e a linha de cima fique fixada no scroller do 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;
}

Se você testar, vai notar que não funciona. Isso ocorre devido à peculiaridade de estouro descrita anteriormente: o .table-wrapper se torna um controle de rolagem bidimensional. Assim, quando position: sticky procura o scroller ancestral mais próximo para cada eixo, o resultado é o elemento .table-wrapper nos dois casos.

Demonstração ao vivo

Gravação da demonstração

Contêineres de rolagem de eixo único corrigem a falha

Com contêineres de rolagem de eixo único, é possível impedir explicitamente que esse eixo secundário se torne um rolador usando clip. Assim, position: sticky pode rastrear dois contêineres de rolagem diferentes de forma independente.

Para corrigir o exemplo de tabela, combine a rolagem horizontal com overflow-y: clip.

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

Ou, usando a abreviação overflow:

.table-wrapper {
  overflow: auto clip;
}

Assim, o .table-wrapper funciona apenas como um contêiner de rolagem para o eixo x. A linha superior fixa agora vai ignorar isso e ficar corretamente fixada no scroller do documento no eixo y, enquanto a primeira coluna continua fixada no .table-wrapper horizontalmente.

Se você estiver lendo esta postagem em um navegador compatível, confira a demonstração a seguir:

Demonstração ao vivo

Gravação da demonstração

Comportamentos afetados

Como os contêineres de rolagem de eixo único mudam a forma como os contextos de rolagem são avaliados e criados, você pode notar mudanças em outros recursos que dependem de contêineres de rolagem, como:

  • position: sticky: como mostrado, os elementos agora vão ficar corretamente dentro de contêineres de rolagem de eixo único, melhorando os comportamentos para elementos restritos por overflow: clip em um eixo.
  • overscroll-behavior: como um elemento agora pode ser um contêiner de rolagem em apenas um eixo, overscroll-behavior talvez não seja mais acionado no eixo cortado, o que pode afetar os efeitos personalizados de puxar para atualizar ou de retorno. Essa mudança no comportamento corresponde ao Firefox e ao Safari.
  • Rolagem programática: chamar APIs de rolagem (como Element.scrollTo()) em um contêiner de rolagem de eixo único agora impõe restrições de rolagem programática. O elemento se recusará a rolar de maneira programática ao longo do eixo definido como "clip".
  • Dimensionamento mínimo de células de grade e flex: para contêineres de rolagem em layouts de grade e flex, o tamanho mínimo padrão (min-width: auto) normalmente é ignorado para permitir que as células se ajustem ao espaço disponível. Quando overflow: clip é definido no mesmo eixo, o tamanho mínimo padrão começa a ter um efeito, o que pode fazer com que o contêiner flexível ou de grade aumente.

Detecção de recursos

Para detectar suporte a contêineres de rolagem de eixo único, consulte a regra @supports named-feature() usando a palavra-chave single-axis-scroll-container.

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

Conforme discutido em CSSWG issue #13677, usar named-feature(single-axis-scroll-container) é a maneira padrão recomendada de detectar essa capacidade, já que a verificação usando apenas @supports (overflow: scroll clip) é uma verificação de análise, que não detecta se o navegador processa os comportamentos de rolagem revisados de eixo único corretamente ou não.

Em JavaScript, use CSS.supports("named-feature(single-axis-scroll-container)") para fazer essa verificação.

Opções de feedback

Para avaliar os possíveis riscos de compatibilidade, foram realizados testes em 190 sites. Com base nessa análise, as mudanças não parecem causar problemas significativos.

No entanto, como os contêineres de rolagem de eixo único alteram fundamentalmente a forma como os contextos de rolagem são avaliados, uma rede mais ampla está sendo lançada. Você precisa testar sites e aplicativos da Web nos canais do Chrome não estáveis para ajudar a identificar casos extremos antes que o recurso seja lançado na versão estável.

Se algo começar a falhar ou se você encontrar um comportamento de rolagem inesperado, registre um bug do Chromium.