Haciendo un div con desplazamiento vertical usando CSS

En el desarrollo web, a menudo surge la necesidad de crear elementos con contenido más extenso que el espacio disponible. Puede que desees tener bloques de texto, tablas o imágenes en un área determinada de la pantalla y permitir que el usuario desplace el contenido verticalmente. Afortunadamente, con CSS, esto es fácilmente lograble a través de una propiedad llamada "overflow". En este artículo, aprenderás cómo hacer un div con desplazamiento vertical usando CSS.

📋 Aquí podrás encontrar✍

¿Qué es "overflow" en CSS?
1. Valores de "overflow"
Cómo hacer un div con desplazamiento vertical
Conclusión
Preguntas frecuentes

¿Qué es "overflow" en CSS?

En CSS, "overflow" es una propiedad que controla qué sucede cuando el contenido de un elemento desborda el espacio disponible. Por defecto, el valor de la propiedad "overflow" es "visible", lo que significa que el contenido adicional fuera del área de visualización se muestra, pero no se recorta. Sin embargo, podemos cambiar esto a diferentes valores para lograr diferentes resultados.

Valores de "overflow"

Hay cuatro valores principales para la propiedad "overflow":

"visible": El contenido que desborda el límite del elemento se muestra al mismo tiempo que el resto del contenido.
"hidden": El contenido que desborda el límite del elemento se oculta.
"scroll": El contenido que desborda el límite del elemento se oculta, pero el usuario puede desplazarse hacia abajo para ver el contenido oculto.
"auto": El comportamiento es similar a "scroll", pero se agrega una barra de desplazamiento solo si es necesario.

Cómo hacer un div con desplazamiento vertical

Para hacer un div con desplazamiento vertical, lo primero que necesitamos es tener un div con un tamaño definido y un contenido que desborde el espacio disponible. Luego, podemos usar el valor "scroll" para la propiedad "overflow" del div para permitir que el usuario se desplace verticalmente por el contenido. Aquí hay un ejemplo:


  <div class="scrollable">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus odio ut consequat venenatis. Fusce sed pretium ipsum. Ut in neque ante. Nam vulputate tempor est eu scelerisque. Integer lobortis ante euismod scelerisque rutrum.</p>
    <p>Pellentesque pulvinar euismod augue. Duis tristique arcu nec condimentum bibendum. Etiam lacinia nulla id libero sodales, vel porta arcu egestas. Sed sollicitudin purus eget dolor malesuada tempor. Nulla nec interdum velit. In arcu nulla, convallis a luctus eu, bibendum vel est.</p>
    <p>Morbi dignissim, ante sit amet tempor suscipit, tellus purus commodo tortor, vel maximus ipsum sapien non nisi. Nullam rhoncus, nulla et lacinia imperdiet, urna quam eleifend mauris, et bibendum ante massa vel libero.</p>
  </div>

  .scrollable {
    height: 200px;
    overflow: scroll;
  }

En el código anterior, hemos definido un div con la clase "scrollable" y un tamaño de altura de 200px. Luego, hemos agregado un contenido que desborda el espacio disponible dentro de ese div. Finalmente, hemos agregado la propiedad "overflow: scroll" para permitir que el usuario desplace el contenido verticalmente y ver el contenido oculto.

Conclusión

Ahora sabes cómo hacer un div con desplazamiento vertical usando CSS. Solo necesitas crear un div con un tamaño definido, agregar contenido que desborde ese tamaño y luego establecer la propiedad "overflow: scroll" en CSS. Recuerda que también puedes usar otros valores para la propiedad "overflow" para lograr diferentes efectos.