En ocasiones anteriores, ya te he contado sobre las propiedades overflow y overflow-x en CSS, con las cuales puedes controlar lo que ocurre cuando el contenido de un elemento desborda el área que debe ocupar. Hoy, es el turno de overflow-y, la propiedad con la que puedes controlar, concretamente, el desbordamiento vertical de un elemento. Por eso, presta mucha atención y toma nota, porque voy a contarte qué es, para qué sirve y cómo puedes implementar esta propiedad.
¿Qué es overflow-y en CSS?
Cuando hablamos del desbordamiento de contenido al diseñar una página web, overflow-y es la propiedad de CSS con la que puedes manejar el contenido que se desborda más allá de los límites verticales de un contenedor. En otras palabras, se encarga de decidir qué hacer cuando el contenido se rebosa hacia arriba o abajo del área visible de un elemento.
Si lo piensas, es como tener un armario lleno de ropa. Tú puedes decidir si dejas todo apilado, aunque no lo veas todo a la vez, o si instalas un sistema con cajones deslizables. También puedes simplemente esconder el desorden. El punto es que esta propiedad te da el poder de elegir cómo resolver este tipo de desbordamientos en el diseño de tus páginas para garantizar siempre una gran experiencia para tus usuarios.
¿Para qué sirve overflow-y en CSS?
Usar overflow-y es muy importante cuando trabajas con interfaces responsivas, textos largos o elementos dinámicos como listas y galerías. Esto es porque, sin el control adecuado, puedes acabar con barras de desplazamiento molestas o puede pasar que el contenido desbordado desaparezca sin razón aparente y desconcierte a los usuarios. Y créeme que nadie quiere eso en su diseño.
Por eso, la principal función de esta propiedad es ayudarte en lo siguiente:
- Evitar que aparezcan barras de desplazamiento inesperadas, especialmente si quieres lograr una página con un diseño limpio y minimalista.
- Asegurar que todo el contenido sea accesible, incluso si es más largo de lo esperado.
- Mantener una apariencia profesional, evitando que tengas secciones cortadas o que aparezcan elementos fuera de lugar.
Como puedes notar, esta propiedad es una herramienta muy importante si quieres garantizar un diseño funcional y estéticamente agradable.
Sintaxis de overflow-y en CSS
Si ya te has familiarizado con la propiedad overflow en CSS, sabrás que implementar esta propiedad es muy sencillo. Lo mismo sucede con overflow-y, ya que la sintaxis básica se aplica directamente al elemento HTML que quieres controlar, de la siguiente manera:
selector {
overflow-y: valor;
}Aquí, los valores que puedes usar son los mismos que los de la propiedad general overflow:
- visible: el contenido desbordado se muestra completo, sin cortes ni barras de desplazamiento. Este es el valor por defecto.
- hidden: el contenido desbordado se oculta.
- scroll: siempre muestra una barra de desplazamiento, sin importar si hay desbordamiento o no.
- auto: muestra una barra de desplazamiento sólo cuando es necesario.
Ejemplo de overflow-y
Para que puedas entender mejor cómo aplicar esta propiedad, vamos a suponer que tienes un contenedor con un contenido que excede los límites verticales, como un párrafo muy largo dentro de un cuadro. Esta es la forma en que podrías manejarlo:
HTML
<div class="contenedor">
<p>
Este es un texto de ejemplo que se repite varias veces para mostrar el comportamiento del overflow-y en CSS.
Este es un texto de ejemplo que se repite varias veces para mostrar el comportamiento del overflow-y en CSS.
Este es un texto de ejemplo que se repite varias veces para mostrar el comportamiento del overflow-y en CSS.
</p>
</div>CSS
.contenedor {
width: 300px;
height: 150px;
border: 1px solid #ccc;
overflow-y: auto;
}Al usar overflow-y: auto, el contenedor solo mostrará una barra de desplazamiento vertical si el contenido sobrepasa los 150px de alto. De esta manera, te aseguras de que el diseño se mantenga limpio y funcional.
Diferencia entre overflow, overflow-x y overflow-y
Puede que te preguntes cuál es la diferencia entre estas propiedades o, más concretamente, para qué existen tres en lugar de una. Entiendo que te lo cuestiones, porque yo también lo hice cuando estaba aprendiendo a manejarlas.
Para responder a estas dudas, déjame recordarte primero para qué sirve cada una:
- overflow: controla el desbordamiento en ambas direcciones, tanto horizontal y vertical.
- overflow-x: se encarga únicamente del desbordamiento horizontal.
- overflow-y: maneja el desbordamiento vertical, como hemos visto en este artículo.
Entonces, la propiedad overflow por sí sola controla el comportamiento de desbordamiento para ambos ejes, horizontal y vertical, simultáneamente. Sin embargo, hay situaciones en las que es útil tener control separado sobre cada eje. Por eso se introdujeron las propiedades overflow-x y overflow-y. Así que, elegir cuál usar depende del diseño que estés creando y del tipo de desbordamiento que necesites controlar.
¿Por qué aprender a usar overflow-y?
Si todavía te estás preguntando por qué deberías aprender a dominar overflow-y en CSS, permíteme decirte que es una habilidad muy útil para cualquier desarrollador que quiera tener mayor dominio de sus páginas web. Esto es porque con esta propiedad puedes evitar las barras de desplazamiento innecesarias y garantizar que todo el contenido sea accesible.
Si te interesa profundizar en el desarrollo web y aprender a crear diseños increíbles, te invito a unirte al Bootcamp de Desarrollo Web de KeepCoding. En este curso, no sólo te enseñaré a manejar las propiedades de CSS y HTML, sino también a usar JavaScript, React y otras tecnologías altamenteme demandadas, para que puedas construir interfaces completas y funcionales que harán la diferencia en tu carrera.
¡Este es el momento para dar el siguiente paso hacia una nueva vida!
