Añadir una barra de scroll en un elemento HTML DIV solamente con CSS.
En HTML, al añadir contenido a una página web, si este excede la altura visible de la ventana y no hay ninguna regla CSS que lo limite, aparecerá automáticamente una barra de desplazamiento (scrollbar). Esta barra te permitirá navegar por el contenido utilizando el ratón o el teclado.
Sin embargo, en algunos casos puede ser necesario habilitar el desplazamiento dentro de un elemento específico de la página, como un <div>
. Esto permite mantener visible el contexto global de la página mientras se explora el contenido de dicho elemento.
En este artículo, aprenderemos cómo añadir una funcionalidad de desplazamiento (scroll) a una lista HTML utilizando exclusivamente CSS.
Este es el código HTML con una lista de actores de Hollywood:
<div class="scrollableWrapper"> <div class="scrollableContent"> <ul class="actorList"> <li>Leonardo DiCaprio</li> <li>Meryl Streep</li> <li>Brad Pitt</li> <li>Angelina Jolie</li> <li>Tom Hanks</li> <li>Scarlett Johansson</li> <li>Johnny Depp</li> <li>Emma Stone</li> <li>Robert Downey Jr.</li> <li>Jennifer Lawrence</li> <li>Will Smith</li> <li>Anne Hathaway</li> <li>Denzel Washington</li> <li>Julia Roberts</li> <li>Chris Hemsworth</li> <li>Margot Robbie</li> <li>Christian Bale</li> <li>Charlize Theron</li> <li>Ryan Reynolds</li> <li>Viola Davis</li> </ul> </div></div>
Creamos el contenedor principal con el nombre de clase .scrollableWrapper
, tiene un espacio fijo definido de ancho y alto. Y utilizamos overflow: hidden
para evitar que el contenido se desborde visualmente fuera de este contenedor.
Dentro creamos otro contenedor .scrollableContent
que es el área interna que contiene la lista de elementos. Aquí se activa el desplazamiento vertical con overflow-y: auto
, lo que permite que aparezcan las barras de desplazamiento solo cuando el contenido exceda la altura del contenedor.
.actorList
contiene los elementos de la lista. Sólo le quitamos los estilos predeterminados del navegador como márgenes y viñetas.
Código CSS completo:
.scrollableWrapper { width: 300px; height: 200px; border: 1px solid #ccc; overflow: hidden;}
.scrollableContent { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; padding: 10px; box-sizing: border-box;}
.actorList { list-style: none; margin: 0; padding: 0;}
.actorList li { padding: 8px 0; border-bottom: 1px solid #eee; font-family: Arial, sans-serif; font-size: 14px; color: #333;}
.actorList li:last-child { border-bottom: none;}
Aquí puedes ver la demo en acción:
<!doctype html><html lang="en">
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Borde animado con CSS</title> <style> .scrollableWrapper { width: 300px; height: 200px; border: 1px solid #ccc; overflow: hidden; }
.scrollableContent { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; padding: 10px; box-sizing: border-box; }
.actorList { list-style: none; margin: 0; padding: 0; }
.actorList li { padding: 8px 0; border-bottom: 1px solid #eee; font-family: Arial, sans-serif; font-size: 14px; color: #333; }
.actorList li:last-child { border-bottom: none; } </style></head>
<body> <div class="scrollableWrapper"> <div class="scrollableContent"> <ul class="actorList"> <li>Leonardo DiCaprio</li> <li>Meryl Streep</li> <li>Brad Pitt</li> <li>Angelina Jolie</li> <li>Tom Hanks</li> <li>Scarlett Johansson</li> <li>Johnny Depp</li> <li>Emma Stone</li> <li>Robert Downey Jr.</li> <li>Jennifer Lawrence</li> <li>Will Smith</li> <li>Anne Hathaway</li> <li>Denzel Washington</li> <li>Julia Roberts</li> <li>Chris Hemsworth</li> <li>Margot Robbie</li> <li>Christian Bale</li> <li>Charlize Theron</li> <li>Ryan Reynolds</li> <li>Viola Davis</li> </ul> </div> </div></body>
</html>