Propiedad CSS overflow-y
Aprende cómo CSS overflow-y controla el recorte vertical y las barras de desplazamiento. Cubre todos los valores, interacción con overflow-x y ejemplos.
La propiedad overflow-y controla qué ocurre cuando el contenido de un elemento es más alto que su contenedor. Puedes dejar que el contenido se desborde, recortarlo de forma invisible o añadir una barra de desplazamiento, ya sea siempre o solo cuando sea necesario.
overflow-y es una de las dos mitades de la abreviatura overflow de dos ejes. Su contraparte overflow-x se encarga de la dirección horizontal. Juntas te dan un control preciso sobre cómo una caja recorta y se desplaza.
Referencia de la propiedad
| Valor inicial | visible |
| Se aplica a | Contenedores de bloque, contenedores flex y contenedores grid |
| Heredada | No |
| Animable | No |
| Versión | CSS3 |
| Sintaxis DOM | element.style.overflowY = "scroll" |
Sintaxis
overflow-y: visible | hidden | scroll | auto | clip | initial | inherit;Valores
| Valor | Descripción |
|---|---|
visible | El contenido no se recorta y puede renderizarse más allá de los bordes superior e inferior del relleno. Este es el valor predeterminado. |
hidden | El contenido se recorta en el cuadro de relleno. No se proporciona barra de desplazamiento; el contenido recortado no es accesible. |
scroll | El contenido se recorta y siempre se muestra una barra de desplazamiento, aunque el contenido quepa. |
auto | El contenido se recorta solo cuando se desborda. El navegador añade una barra de desplazamiento automáticamente cuando es necesario. |
clip | El contenido se recorta como con hidden, pero también desactiva el desplazamiento programático (scrollTop). Más restrictivo que hidden. |
initial | Restablece la propiedad a su valor predeterminado (visible). |
inherit | Hereda el valor calculado del elemento padre. |
Cuando overflow-y se establece en scroll, auto o hidden, el navegador cambia automáticamente cualquier valor visible en overflow-x a auto. Esto se debe a que una caja no puede estar recortada en un eje mientras permanece verdaderamente sin restricciones en el otro: la especificación no permite esa combinación.
Cuándo usar cada valor
visible— el valor predeterminado; útil cuando quieres intencionadamente que un elemento (como un tooltip o un desplegable) desborde sus límites sin ser cortado.hidden— úsalo para recortar desbordes decorativos (por ejemplo, una imagen de fondo grande que no debería provocar barras de desplazamiento en la página) o para establecer un nuevo contexto de formato de bloque.scroll— úsalo cuando siempre quieras que el hueco de la barra de desplazamiento esté reservado para que el diseño no se desplace cuando el contenido crezca. Útil en barras laterales o paneles donde importa la estabilidad del diseño.auto— la opción más habitual para regiones desplazables. La barra de desplazamiento aparece solo cuando el contenido realmente se desborda, evitando el hueco permanente que creascroll.clip— úsalo cuando necesites evitar todo desplazamiento (incluida la manipulación descrollTopcon JavaScript) dentro de una región contenida, sin mostrar ninguna barra de desplazamiento.
Ejemplos
overflow-y: scroll
La barra de desplazamiento siempre se renderiza, aunque todo el texto quepa. El contenedor recorta verticalmente y permite al usuario desplazarse.
<!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
El contenido se renderiza más allá del borde inferior del contenedor. Observa que el texto se sale del cuadro verde: no ocurre ningún recorte.
<!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
El contenido se recorta en el borde inferior del contenedor. No aparece ninguna barra de desplazamiento y el contenido recortado no puede alcanzarse desplazándose.
<!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
Una barra de desplazamiento aparece solo cuando el texto desborda la altura fija. Si el contenido fuera más corto que 60 px, no se mostraría ninguna barra de desplazamiento.
<!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 los valores uno al lado del otro
Este ejemplo coloca los cuatro valores principales uno al lado del otro para que puedas comparar su comportamiento visual de un vistazo.
<!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>Problemas comunes
overflow-y: visible es cambiado silenciosamente por el navegador. Si estableces overflow-x a cualquier valor distinto de visible en el mismo elemento, overflow-y: visible se trata como auto. La especificación requiere que ambos ejes sean visible si alguno de ellos debe permanecer verdaderamente sin restricciones.
overflow-y: hidden crea un contenedor de desplazamiento sin barra de desplazamiento. Los usuarios no pueden desplazarse con la rueda del ratón o un gesto táctil, pero JavaScript puede seguir moviendo la posición de desplazamiento a través de scrollTop. Usa overflow-y: clip si también quieres evitar eso.
Se requiere una height fija para que scroll y auto tengan efecto. Sin una altura restringida, el elemento simplemente crece para ajustarse a su contenido, por lo que nunca se produce desbordamiento y no aparece ninguna barra de desplazamiento.
Desplazamiento táctil en dispositivos móviles. Para habilitar el desplazamiento con inercia en un contenedor overflow-y: auto o overflow-y: scroll en iOS Safari, puede que necesites añadir -webkit-overflow-scrolling: touch en bases de código antiguas (esto ya no es necesario en versiones modernas de iOS donde está habilitado por defecto).
Contextos de apilamiento. Establecer overflow-y a cualquier valor distinto de visible crea un nuevo contexto de apilamiento en ese elemento. Esto puede afectar al comportamiento de z-index en los elementos hijo que intentan desbordarse del contenedor.
Propiedades relacionadas
overflow— abreviatura para ambos ejesoverflow-x— comportamiento del desbordamiento horizontaloverflow-wrap— controla el salto de línea para palabras largastext-overflow— cómo se señala el texto en línea recortado (por ejemplo, puntos suspensivos)scroll-behavior— si el desplazamiento se anima suavemente o saltaresize— permite a los usuarios redimensionar un contenedor desplazableheight— la restricción de altura que desencadena el desbordamiento