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 de rolagem. Devido a esses possíveis riscos de compatibilidade, pedimos aos desenvolvedores que testem seus sites e enviem feedback antes que esse recurso seja lançado nos canais estáveis.
O recurso está disponível para testes de desenvolvedores no Chrome 153 nos canais de lançamento Beta, Dev e Canary. Não é necessário ativar uma flag.
A peculiaridade de definir o overflow 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 ao tentar manter o outro visível (por exemplo, definir overflow-x: scroll e deixar overflow-y: visible), o mecanismo de estilo do navegador vai forçar automaticamente o eixo visível a ser calculado como auto (ou scroll). Isso cria um controle de rolagem bidimensional, mesmo que você não tenha a intenção de fazer isso.
Essa peculiaridade fica muito visível ao tentar criar uma tabela com uma linha superior e uma primeira coluna fixas. No exemplo a seguir, o objetivo é que a primeira coluna fique fixada no .table-wrapper que rola horizontalmente, e a linha superior fique fixada na barra de rolagem 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ê tentar, vai notar que não funciona. Isso ocorre devido à peculiaridade de overflow descrita anteriormente: o .table-wrapper se torna um controle de rolagem bidimensional. Assim, quando position: sticky procura o controle de rolagem ancestral mais próximo para cada eixo, o resultado é o elemento .table-wrapper em ambos os casos.
Demonstração ao vivo
Gravação da demonstração
Os contêineres de rolagem de eixo único corrigem a peculiaridade
Com contêineres de rolagem de eixo único, é possível impedir explicitamente que o eixo secundário se torne uma barra de rolagem usando clip. Dessa forma, position: sticky pode rastrear dois contêineres de rolagem diferentes de forma independente.
Para corrigir o exemplo da tabela, pareie a rolagem horizontal com overflow-y: clip.
.table-wrapper {
overflow-x: auto;
overflow-y: clip;
}
Ou, usando o atalho overflow:
.table-wrapper {
overflow: auto clip;
}
Ao fazer isso, o .table-wrapper só funciona como um contêiner de rolagem para o eixo x. A linha superior fixa agora vai ignorá-lo e ficar corretamente fixada na barra de rolagem do documento no eixo y, enquanto a primeira coluna continua fixada no .table-wrapper horizontalmente.
Se você estiver acessando esta postagem em um navegador com suporte, poderá conferir a demonstração a seguir em ação:
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 fixados em contêineres de rolagem de eixo único, melhorando os comportamentos de elementos restritos poroverflow: clipem um eixo.overscroll-behavior: como um elemento agora pode ser um contêiner de rolagem em apenas um eixo,overscroll-behaviorpode não ser mais acionado no eixo recortado, afetando potencialmente os efeitos personalizados de puxar para atualizar ou de retorno. Essa mudança de 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 programaticamente ao longo do eixo definido como clipe. - Dimensionamento mínimo de células de grade e flexbox: para contêineres de rolagem em layout de grade e flexbox, o tamanho mínimo padrão (
min-width: auto) normalmente é ignorado para permitir que as células se ajustem ao espaço disponível. Quandooverflow: 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 cresça.
Detecção de recursos
Para detectar o suporte a contêineres de rolagem de eixo único, consulte a @supports named-feature() regra usando a single-axis-scroll-container palavra-chave.
@supports named-feature(single-axis-scroll-container) {
/* Feature is supported */
}
Conforme discutido no problema do CSSWG nº 13677 (link em inglês), o uso de named-feature(single-axis-scroll-container) é a maneira padrão recomendada de detectar essa capacidade, já que a verificação usando @supports (overflow: scroll clip) sozinha é apenas uma verificação de análise, que não detecta se o navegador processa os comportamentos de rolagem de eixo único revisados corretamente ou não.
No JavaScript, use CSS.supports("named-feature(single-axis-scroll-container)") para realizar 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 introduzir nenhuma interrupção significativa.
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 criada. Você precisa testar sites e aplicativos da Web nos canais não estáveis do Chrome para ajudar a identificar casos extremos antes que esse recurso seja lançado para estáveis.
Se as coisas começarem a quebrar ou se você encontrar um comportamento de rolagem inesperado, por favor, registre um bug do Chromium.