Propriedade CSS overflow-y: guia completo, valores e truques

Início » Python » Propriedade CSS overflow-y: guia completo, valores e truques

Controlar como se comporta o conteúdo quando o conteúdo é vendido para um design web limpo e utilizável; neste terreno, overflow-y em CSS manda sobre o desbordamento vertical, decidindo se recuar, mostrar barras de deslocamento ou deixar que o conteúdo fique fora do quadro.

Mais do que o básico, há mudanças que mudam por completo o resultado: certos valores ativam um novo contexto de formato, alguns permitem o deslocamento com JavaScript e outros o bloqueiam, e tem efeitos colaterais que podem fazer com que um contêiner passe a ser “rolável” em ambos os casos se não estiver configurado corretamente.

O que é overflow-y e para quê servir?

A propriedade estouro-y indica ao navegador o que fazer com o conteúdo que rebase o elemento por seu borda superior e inferior. Quando um bloco tiver mais conteúdo do que cabe na altura definida (o máxima), este ajuste decidirá se o conteúdo for recuado, se tornar desagradável ou ficar visível fora do recuadro.

Você pode gravar sua relação com sua “hermana” horizontal: overflow-x controla as laterais esquerda e direita, enquanto transborda e se centraliza para cima e para baixo. E, por suposto, a propriedade abreviada transbordar permite estabelecer ambos os exemplos por vez com um ou dois valores.

Sintaxe e valores admitidos

En su forma más directa, overflow-y aceita os valores oculto, rolagem, automático e visível; desde especificações modernas também existe clipe. Você pode declarar o seguinte:

/* CSS */
selector {
  overflow-y: hidden | scroll | auto | visible | clip;
}

Si usas la abreviatura transbordar, puedes pasar um ou dos valores. Com um valor, aplica-se a ambos os exemplos; com os valores, o primeiro corresponde a estouro-x (horizontal) e o segundo a estouro-y (vertical):

/* Un solo valor, aplica a X e Y */
.container { overflow: auto; }

/* Dos valores: overflow-x overflow-y */
.panel { overflow: hidden auto; }

Significado detalhado de cada valor

É fácil cair na superfície, mas cada palavra chave especifica um comportamento específico, e alguns incluem regras de acessibilidade e desempenho importantes.

• visível (valor por defeito): o conteúdo não é registrado e pode sobresalir mais além da área de preenchimento do elemento. O elemento não se converte no recipiente de deslocamento; útil se você não quiser limitar o conteúdo, mas pode provocar problemas com outros componentes.

• escondido: o conteúdo é gravado na borda do preenchimento; não se mostram barras de deslocamento. O conteúdo continua existindo no fluxo interno, mas não é visível fora da área. Mesmo que o usuário não possa fazer scroll manual, você pode mudar de forma programática (por exemplo, com scrollTop ou deslocando o foco), de modo que o elemento é considerado o recipiente de deslocamento.

• clipe: recorta el contenido en el borda de recorte de transbordamento, definido por overflow-clip-margin. A diferença de hidden, não permite deslocamento, nem manual nem programático. Não crie um novo contexto de formato por si mesmo; se você precisar de aislar el flujo (como haria auto/scroll/hidden), combiná-lo com display: flow-root. Usado quando você quer um corte tajante sem scroll ni “resquicios”.

• scroll: el contenido se recorta y sempre se exibe barras de deslocamento no eje al que aplique, haya o no desbordamiento real. Esta constante evita que as barras apareçam e desapareçam quando o conteúdo flutua; dez em conta que, aun así, ao imprimir, o conteúdo desbordado pode ser incluído dependendo do motor de impressão.

• auto: semelhante a um pergaminho, mas solo añade barras quando são necessárias. Se o conteúdo cabe, o resultado visual se aproxima do visível, mas o elemento atua como recipiente de deslocamento e além estabelecer um novo contexto de formato por motivos de rendimento e refluxo com elementos flutuantes.

Matizes essenciais para mudar o resultado

Existem cinco detalhes que não convêm passar por alto e que, na prática, marcam a diferença: as dimensões, o contexto de formato, a interação entre os indivíduos, a impressão e o suporte de deslocamento programático.

Para que o desbordamento vertical tenha efeito real, o bloco deve ter altura (altura) ou altura máxima (altura máxima) definido; si trabajas en termos lógicos, usa tamanho-do-bloco ou tamanho-máximo-do-bloco. Para cenários dinâmicos, aprenda a obter a altura de um elemento. No eje horizontal ocorre o mesmo com largura/largura máxima o tamanho-em-linha/tamanho-máximo-em-linha; outra opção para forçar o desbordamento online é espaço em branco: nowrap.

Ao escolher qualquer valor diferente de visível e de clipe para overflow/overflow-y, o elemento crie um novo contexto de formato de bloqueio. Isso evita que, por exemplo, um flutuador próximo reempacote o conteúdo em cada passo da rolagem, algo que degradaria o desempenho ao ser deslocado.

Também existem regras de interação entre aqueles que são surpreendidos pela primeira vez: se você estabelecer visível em um eixo e no outro usa um valor que não é visível no mar ni clip, ese visível actúa como auto. Asimismo, si pones clipe em um eje e no outro não é visível ni clipe, el clipe se comporta como oculto; conviene conocerlo para evitar resultados inesperados.

Na prática diária, muita gente observa o que se aplica scroll o auto en un eje, el elemento pasa a ser un recipiente de rolagem e certas ações (como pseudo-elementos que sobresalen) podem ativar também o deslocamento no outro eje si não se controla bem. É um comportamento coerente com as especificações e os motores de renderização atuais.

Exemplo rápido: fixar a altura e ativar a rolagem vertical

Uma demonstração típica consiste em acotar a altura de um bloco de texto e permitir que o excesso se desloque verticalmente. Neste caso, estouro-y: automático añade la barra solo quando haga falta.

<div class="caja">
  <p>Texto largo...</p>
  <p>Más texto...</p>
</div>

.caja {
  max-height: 220px;
  padding: 12px;
  border: 1px solid #ccc;
  overflow-y: auto;   /* barra vertical solo si es necesaria */
  overflow-x: hidden; /* evitamos scroll horizontal accidental */
}

Fíjate en el detalle: overflow-x: complemento oculto de um overflow-y para evitar que vibrações de layout, sombras ou pseudoelementos provoquem uma barra horizontal indesejada.

Controle e deslocamento com JavaScript

Quando o conteúdo é descartável (automático, rolagem ou até mesmo oculto), você pode mover o conteúdo por código com propriedades e métodos padrão como Element.scrollTop y Element.scrollTo(). Isso permite, por exemplo, levar o foco visual para um canto interno ou simular um salto no final da lista.

// Desplazar 200px hacia abajo
const panel = document.querySelector('.panel');
panel.scrollTop = 200;

// O ir con precisión a una posición
panel.scrollTo({ top: 0, behavior: 'smooth' });

Há uma exceção explícita: se você usa overflow: clip, o agente de usuario não permite deslocamento programático; o conteúdo fora da borda do clipe não é acessível nem pelo mouse nem por JavaScript.

Acessibilidade: teclado, foco e leitores de tela

Uma área desprezível não é sempre focalizável por teclado, assim como o usuário que navega sem rato pode cair sem forma de desplazarla. No Firefox e no Chrome 132 ou superior, os conteúdos de rolagem se hacen focalizáveis ​​por defeito; em outros navegadores, añade tabindex="0" para o contêiner.

Agora sim, se apresenta esse Parada de tabulação a ciegas, um leitor de tela pode ser levado para a região sem contexto. Para mitigarlo, atribua um rol ARIA adequado (por exemplo, role="region") e fornece um nome acessível com aria-label o aria-labelledby. Um rótulo claro melhora a assistência à navegação sem sacrificar a usabilidade.

Overflow-x e overflow-y: como se combina

La propiedad abreviada transbordar permite estabelecer ambos os exemplos por vez com um ou dois valores; Quando especifica isso, o primeiro é para estouro-x e o segundo para estouro-y. Isso facilita casos como evitar a barra horizontal ao permitir a rolagem vertical.

/* Evita barra horizontal, permite scroll vertical si hace falta */
.contenedor { overflow: hidden auto; }

Como gravador rápido, os valores disponíveis para configurar o desbordamento são: visível, escondido, clipe, scroll y auto. A nível de ejes, estouro-x gobierna el flujo horizontal y estouro-y na vertical, e você pode combiná-los de acordo com a conveniência.

“Recortar borda” e margem de recorte de estouro

Se você escolher estouro: recorte (o solo no eje Y), o recorte se realiza no denominado borda de clipe de desbordamento. Essa borda pode ser estendida além do preenchimento graças a overflow-clip-margin, que aceite uma comprimento para deixar “aire” antes de gravar.

.tarjeta {
  overflow-y: clip;              /* cortar sin permitir scroll */
  overflow-clip-margin: 8px;     /* recorta 8px por fuera del padding */
}

Lembrar clipe não cria um novo contexto de formato. Se for necessário isolamento (por exemplo, para gerenciar carros alegóricos ou conter mais colapsados), combine o clipe com exibir: raiz de fluxo e também apresenta o mesmo efeito de contenção que exibe auto/scroll/hidden.

Cuándo necesitas dimensiones explícitas

Para que o recorte ou o pergaminho apareça de verdade, o elemento precisa de uma altura estável (height ou max-height) no exemplo do bloco, ou seu equivalente lógico tamanho-do-bloco/tamanho-máximo-do-bloco; se não, o conteúdo crescerá com o conteúdo e o desbordamento não será ativado.

Em layouts horizontais (por exemplo, carrosséis), defina largura/largura máxima o tamanho-em-linha/tamanho-máximo-em-linha para forçar o desbordamento no eje X; também posso usar espaço em branco: nowrap para evitar saltos de linha e fazer com que o conteúdo exceda o nível disponível.

Evitar a barra horizontal por pseudoelementos ou sombras

Um caso real muito habitual: um pseudoelemento ::depois que flutua para a direita, ou uma sombra alargada, sobrepassa o contêiner e ativa a barra horizontal em um elemento que você tem overflow-y. Isso acontece porque, ao ser convertido em contêiner de rolagem, o motor considera a área desbordada para o eje opuesto.

Soluções típicas: aplica overflow-x: oculto no conteúdo descartável; controla o tamanho e a posição do pseudo-elemento (p. ej., com transformar em vez de posição absoluta se procede); o acota con recorte/caminho de recorte si busca um recorte tajante. Quaisquer dessas estratégias evita a rolagem horizontal indesejada sem sacrificar o vertical.

Demonstração de resultados com cada valor

O próximo bloco mostra como mudar a visibilidade e as barras com os diferentes valores de overflow-y, todos com a misma altura máxima para forçar o desbordamento vertical:

<div class="demo visible">Contenido largo...</div>
<div class="demo hidden">Contenido largo...</div>
<div class="demo clip">Contenido largo...</div>
<div class="demo scroll">Contenido largo...</div>
<div class="demo auto">Contenido largo...</div>

.demo {
  max-height: 140px;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #bbb;
}
.visible { overflow-y: visible; }
.hidden  { overflow-y: hidden; }
.clip    { overflow-y: clip; }
.scroll  { overflow-y: scroll; }
.auto    { overflow-y: auto; }

Notar que scroll sempre mostra a barra vertical, enquanto o auto só faz isso quando o texto excede a altura. En escondido, o conteúdo contido não se vê, mas continua ali; no clipe, diretamente não existe uma via de deslocamento, nem você quer com código.

Impressão e conteúdo desbordado

Um detalhe menos conhecido: con estouro: rolagem, alguns motores de impressão pode acabar imprimindo o conteúdo desbordado ainda não quepa en pantalla. Se seu caso de uso considerar exportar um PDF ou papel, verifique e decida se prefere escondido o incluso clipe para evitar partidas inesperadas.

Compatibilidade entre navegadores

As propriedades estouro, estouro-x y estouro-y Desfrute de suporte sólido nos navegadores modernos desde muitas versões. O valor clipe e seu parceiro overflow-clip-margin pertence a especificações mais recentes, mas adopción actual es ampla e crece com cada lançamento; verifique as matrizes de compatibilidade se forem adequadas a ambientes antigos.

No que diz respeito ao foco de recipientes descartáveis, lembre-se da peculiaridade: Firefox e Chrome 132+ eles foram focalizados por defeito; para o resto, añade tabindex=”0″ manualmente e uma função/nome acessível para uma experiência consistente.

Boas práticas de maquiagem

Não todo é colocar uma barra e uma lista: combinações de propriedades para prevenir desplazamentos indesejados e ganhar estabilidade visual. Aqui estão algumas diretrizes que funcionam muito bem na produção.

• Definir dimensões: sem altura/altura máxima ou tamanho do bloco, o conteúdo aumentará e não verá o efeito de overflow-y.

• Añade overflow-x: oculto quando usa overflow-y, salvo que precisa de cintos e suspensórios horizontais. Evita barras laterais provocadas por sombras, bordas ou pseudo-elementos.

• Prefiere auto frente a scroll se você quiser que a barra apareça apenas quando estiver faltando, e role se você procurar dimensões estabelecidas de layout sem “saltos” para aparecer/desaparar barras de rolagem.

• Usa clip cuando quieras recorte duro (sem rotas de deslocamento), e combiná-lo com display: flow-root se precisar de contenção do fluxo.

Relação com DOM e APIs úteis

Em JavaScript, o DOM expõe transbordamentoY como propriedade de estilo, e você pode inspecionar/ajustar o estado do elemento: element.style.overflowY y getComputedStyle(element).overflowY. Além disso, para transferir o conteúdo dos EUA rolar para cima y scrollTo(), salve o clipe onde não há rolagem de nenhum tipo.

const panel = document.querySelector('.panel');
panel.style.overflowY = 'auto';
if (getComputedStyle(panel).overflowY !== 'visible') {
  panel.scrollTo({ top: panel.scrollHeight, behavior: 'smooth' });
}

Se você trabalha com links internos, lembre-se de que tabular para um elemento oculto dentro de um contêiner oculto/automático pode fazer com que o navegador rolar automaticamente para ponerlo en vista; é uma forma legítima de deslocamento programático, útil para melhorar a navegação com o teclado.

Tabela mental rápida de opções

Para ter certeza de uma visão: visível deja que todo sobresalga; escondido recorta e permite rolagem programática; clipe recorta y no permite scroll; scroll recorta mas sempre mostra barras; sim auto solo mostra barras quando procede. E lembrei que não visível/clip cria contexto de formato, vital para desempenho com floats.

Exemplos de combinações por exemplos

Dos clientes que vemos constantemente: permitir rolagem vertical sem barra horizontal, e recortar em um eje com clipe enquanto o outro se desloca automaticamente.

/* Scroll vertical, sin horizontal */
.lista {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Recorte duro en X, desplazamiento automático en Y */
.panel {
  overflow-x: clip;
  overflow-y: auto;
  display: flow-root; /* contén el flujo si lo necesitas */
}

Dez presentes as regras de interação: se um exemplo usar um valor diferente de visível/clip e o outro colocar visível, esses visíveis se elevar um carro. Com clipe acontece algo parecido: se o outro eje não é visível ni clipe, el clipe actúa como oculto.

Casos de uso comuns

Em interfaces modernas, estouro-y é indispensável para chatboxes, painéis de filtros, menus largos, registros ou listados com altura acotada. Se complementa com cabeças pegajosas e rodapés dentro do conteúdo, e suele acompanha overflow-x: oculto para evitar barras laterais.

Em projetos com tarjetas ou modais, você pode alternar entre auto (para não mostrar a barra se não houver falta) e scroll (para estabilizar a âncora quando a barra aparecer durante o carregamento). Se o modal precisar recortar partes decorativas, clipe evita interações e adia cálculos.

Erros comuns e como evitá-los

A falha mais repetida é uma declaração transbordamento sem altura e espero uma barra que nunca chega; definir altura ou altura máxima/tamanho do bloco. O segundo é esquecido do exemplo horizontal: sempre valor overflow-x em paralelo, sobre todo si usa sombras ou pseudo-elementos.

Un tercero es no considerar acessibilidade: contenedores descartáveis ​​sem foco de teclado ou sem nome acessível complicam a vida dos usuários com o leitor de tela. Añade tabindex, role e aria-label quando não há mar focalizável por defeito.

Recursos Relacionados

Se quiser ampliar, revise o tutorial geral de desbordamiento en CSS e a referência do DOM para overflowY em elementos. Estas páginas cobrem desde os fundamentos até os detalhes de implementação e compatibilidade.

Dominar overflow-y implica sentido o que recita, quando se desplaza, como interage com o eje opuesto e que efeito tem no contexto de formato; com as diretrizes de dimensões, acessibilidade e combinação com overflow-x, é fácil registrar painéis fluidos, sem barras imprevistas e com um deslocamento suave tanto para usuários quanto para scripts.