Propriedade CSS overflow-y
Aprenda como o CSS overflow-y controla o recorte vertical de conteúdo e barras de rolagem. Cobre todos os valores, interação com overflow-x e exemplos.
A propriedade overflow-y controla o que acontece quando o conteúdo de um elemento é mais alto do que seu contêiner. Você pode deixar o conteúdo transbordar, recortá-lo de forma invisível ou adicionar uma barra de rolagem — sempre ou apenas quando necessário.
overflow-y é uma das metades do shorthand overflow de dois eixos. Sua contraparte overflow-x lida com a direção horizontal. Juntas, elas oferecem controle refinado sobre como uma caixa recorta e rola.
Referência da propriedade
| Valor inicial | visible |
| Aplica-se a | Contêineres de bloco, contêineres flex e contêineres grid |
| Herdado | Não |
| Animável | Não |
| Versão | CSS3 |
| Sintaxe DOM | element.style.overflowY = "scroll" |
Sintaxe
overflow-y: visible | hidden | scroll | auto | clip | initial | inherit;Valores
| Valor | Descrição |
|---|---|
visible | O conteúdo não é recortado e pode ser renderizado além das bordas superior e inferior do padding. Este é o padrão. |
hidden | O conteúdo é recortado na caixa de padding. Nenhuma barra de rolagem é fornecida; o conteúdo recortado fica inacessível. |
scroll | O conteúdo é recortado e uma barra de rolagem é sempre exibida, mesmo que o conteúdo caiba. |
auto | O conteúdo só é recortado quando transborda. O navegador adiciona uma barra de rolagem automaticamente quando necessário. |
clip | O conteúdo é recortado como em hidden, mas também desativa a rolagem programática (scrollTop). Mais restritivo do que hidden. |
initial | Redefine a propriedade para seu valor padrão (visible). |
inherit | Herda o valor computado do elemento pai. |
Quando overflow-y é definido como scroll, auto ou hidden, o navegador altera automaticamente qualquer valor visible em overflow-x para auto. Isso ocorre porque uma caixa não pode ser recortada em um eixo enquanto permanece verdadeiramente irrestrita no outro — a especificação não permite essa combinação.
Quando usar cada valor
visible— o padrão; útil quando você deseja intencionalmente que um elemento (como um tooltip ou menu suspenso) transborde seus limites sem ser cortado.hidden— use para recortar overflow decorativo (por exemplo, uma imagem de fundo grande que não deve causar barras de rolagem na página) ou para estabelecer um novo contexto de formatação de bloco.scroll— use quando você sempre quer a calha da barra de rolagem reservada para que o layout não mude quando o conteúdo crescer. Útil em barras laterais ou painéis onde a estabilidade do layout importa.auto— a escolha mais comum para regiões roláveis. A barra de rolagem aparece apenas quando o conteúdo realmente transborda, evitando a calha permanente quescrollcria.clip— use quando precisar evitar toda a rolagem (incluindo a manipulação descrollTopvia JavaScript) dentro de uma região contida, sem exibir nenhuma barra de rolagem.
Exemplos
overflow-y: scroll
A barra de rolagem é sempre renderizada, mesmo que todo o texto caiba. O contêiner recorta verticalmente e permite que o usuário role.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.scroll {
background-color: #1c87c9;
color: #fff;
height: 60px;
width: 200px;
overflow-y: scroll;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>Overflow-y: scroll</h3>
<div class="scroll">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>overflow-y: visible
O conteúdo é renderizado além da borda inferior do contêiner. Observe que o texto sangra para fora da caixa verde — nenhum recorte ocorre.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.visible {
background-color: #8ebf42;
color: #666;
height: 40px;
width: 200px;
overflow-y: visible;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>Overflow-y: visible</h3>
<div class="visible">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>overflow-y: hidden
O conteúdo é recortado na borda inferior do contêiner. Nenhuma barra de rolagem aparece e o conteúdo recortado não pode ser acessado por rolagem.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.hidden {
background-color: #1c87c9;
color: #fff;
height: 60px;
width: 200px;
overflow-y: hidden;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>Overflow-y: hidden</h3>
<div class="hidden">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>overflow-y: auto
Uma barra de rolagem aparece apenas quando o texto transborda a altura fixa. Se o conteúdo fosse menor que 60 px, nenhuma barra de rolagem seria exibida.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.auto {
background-color: #1c87c9;
color: #fff;
height: 60px;
width: 200px;
overflow-y: auto;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>Overflow-y: auto</h3>
<div class="auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>Todos os valores lado a lado
Este exemplo coloca os quatro valores principais um ao lado do outro para que você possa comparar seu comportamento visual de uma só vez.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.scroll {
background-color: #8ebf42;
height: 70px;
width: 150px;
overflow-y: scroll;
}
div.hidden {
background-color: #8ebf42;
height: 70px;
width: 150px;
overflow-y: hidden;
}
div.auto {
background-color: #8ebf42;
height: 70px;
width: 150px;
overflow-y: auto;
}
div.visible {
background-color: #8ebf42;
height: 70px;
width: 150px;
overflow-y: visible;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>overflow-y: scroll</h3>
<div class="scroll">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
</div>
<h3>overflow-y: hidden</h3>
<div class="hidden">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<h3>overflow-y: auto</h3>
<div class="auto">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<h3>overflow-y: visible</h3>
<div class="visible">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Armadilhas comuns
overflow-y: visible é silenciosamente alterado pelo navegador. Se você definir overflow-x para qualquer valor diferente de visible no mesmo elemento, overflow-y: visible será tratado como auto. A especificação exige que ambos os eixos sejam visible para que algum deles permaneça verdadeiramente irrestrito.
overflow-y: hidden cria um contêiner de rolagem sem barra de rolagem. Os usuários não podem rolar com a roda do mouse ou gesto de toque, mas o JavaScript ainda pode mover a posição de rolagem via scrollTop. Use overflow-y: clip se quiser evitar isso também.
Uma height fixa é necessária para que scroll e auto tenham efeito. Sem uma altura restrita, o elemento simplesmente cresce para acomodar seu conteúdo, portanto nenhum overflow ocorre e nenhuma barra de rolagem aparece.
Rolagem por toque em dispositivos móveis. Para habilitar a rolagem com momentum em um contêiner overflow-y: auto ou overflow-y: scroll no iOS Safari, talvez seja necessário adicionar -webkit-overflow-scrolling: touch em bases de código mais antigas (isso não é mais necessário em versões modernas do iOS, onde é habilitado por padrão).
Contextos de empilhamento. Definir overflow-y para qualquer valor diferente de visible cria um novo contexto de empilhamento nesse elemento. Isso pode afetar o comportamento do z-index em elementos filhos que tentam transbordar o contêiner.
Propriedades relacionadas
overflow— shorthand para ambos os eixosoverflow-x— comportamento de overflow horizontaloverflow-wrap— controla a quebra de linha para palavras longastext-overflow— como o texto inline recortado é sinalizado (por exemplo, reticências)scroll-behavior— se a rolagem anima suavemente ou saltaresize— permite que os usuários redimensionem um contêiner rolávelheight— a restrição de altura que aciona o overflow