【CSS】Desplazamiento básico｜Uso de overflow-scroll
Este artículo explica cómo usar la propiedad overflow-scroll de CSS para mostrar una barra de desplazamiento cuando el contenido se desborda. Es muy útil cuando deseas mostrar contenido dentro de un elemento de tamaño fijo y permitir el desplazamiento.
🔹 Ejemplo de código
<div class="container">
<div class="content">El contenido aparecerá aquí. Se mostrará una barra de desplazamiento.</div>
</div>
<style>
.container {
width: 100%;
height: 150px;
border: 2px dashed #000;
overflow: scroll;
}
.content {
height: 300px;
background-color: #f0f0f0;
}
</style>
💻 Código completo funcional (copia y pega para usar)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de desplazamiento</title>
<style>
.container {
width: 100%;
height: 150px;
border: 2px dashed #000;
overflow: scroll;
}
.content {
height: 300px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
<div class="content">El contenido aparecerá aquí. Se mostrará una barra de desplazamiento.</div>
</div>
</body>
</html>
🧩 Aplicaciones y casos de uso
overflow: scroll; se usa cuando deseas mostrar una barra de desplazamiento cuando el contenido se desborda de un elemento. Esto es útil para asegurarte de que los usuarios puedan ver todo el contenido dentro de un elemento de tamaño fijo.
📱 Diseño adaptativo
En el diseño adaptativo, overflow: scroll; se usa comúnmente para mostrar barras de desplazamiento en pantallas pequeñas como smartphones o tabletas. También puedes usar consultas @media para cambiar la visualización según tamaños de pantalla específicos.
Las barras de desplazamiento son muy útiles, especialmente cuando se tiene una lista larga o contenido complejo, ya que permiten que el contenido encaje en el espacio disponible sin afectar la disposición de otros elementos.