En este tutorial, aprenderás a personalizar y estilizar las barras de desplazamiento utilizando CSS. La personalización de las barras de desplazamiento puede brindar a tu sitio web una apariencia única y destacada. Exploraremos las propiedades nativas de CSS para estilizar las barras de desplazamiento y también discutiremos algunas bibliotecas externas que brindan soporte cruzado del navegador.
Introducción
¿Alguna vez te has preguntado cómo se crean esas barras de desplazamiento personalizadas en algunos sitios web? En este tutorial, te sumergirás en el mundo de la personalización de barras de desplazamiento con CSS. Antes de sumergirnos en el código, es importante comprender los posibles trade-offs de personalizar las barras de desplazamiento, ya que puede mejorar la apariencia de tu sitio, pero también podría afectar la experiencia del usuario.
Creando la Estructura Básica
Comencemos creando una estructura básica de la página web que nos permitirá visualizar las barras de desplazamiento. Utilizaremos HTML para definir la estructura y CSS para darle estilo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href="styles.css">
<title>Personalización de Barras de Desplazamiento en CSS</title>
</head>
<body>
<div class="container">
<h1>Personalización de Barras de Desplazamiento en CSS</h1>
<!-- Tus párrafos y contenido aquí -->
</div>
</body>
</html>Propiedades CSS para Estilizar Barras de Desplazamiento
Propiedades de Webkit para Navegadores como Chrome y Safari
Enfocándonos principalmente en navegadores Webkit como Chrome y Safari, exploraremos las propiedades clave:
::-webkit-scrollbar: Barra de desplazamiento completa.::-webkit-scrollbar-track: Área completa de la barra de progreso.::-webkit-scrollbar-thumb: Sección arrastrable de la barra de desplazamiento.
Ejemplos de Estilos
Barra de Desplazamiento en Modo Oscuro
html::-webkit-scrollbar {
width: 20px;
}
html::-webkit-scrollbar-track {
background-color: black;
}
html::-webkit-scrollbar-thumb {
background: #4e4e4e;
border-radius: 25px;
}Barra de Desplazamiento Minimalista
html::-webkit-scrollbar {
width: 10px;
}
html::-webkit-scrollbar-track {
background: rgb(179, 177, 177);
border-radius: 10px;
}
html::-webkit-scrollbar-thumb {
background: rgb(136, 136, 136);
border-radius: 10px;
}
html::-webkit-scrollbar-thumb:hover {
background: rgb(100, 100, 100);
border-radius: 10px;
}
html::-webkit-scrollbar-thumb:active {
background: rgb(68, 68, 68);
border-radius: 10px;
}Barra de Desplazamiento con Patrón
html::-webkit-scrollbar {
width: 20px;
}
html::-webkit-scrollbar-track {
background-image: repeating-linear-gradient(45deg, red 0, red 1px, transparent 0, transparent 50%);
background-size: 10px 10px;
}
html::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 5px;
border: 2px solid black;
box-shadow: inset 1px 1px 5px black;
}Barra de Desplazamiento con Gradiente "Animado"
html::-webkit-scrollbar {
width: 20px;
}
html::-webkit-scrollbar-track {
background: linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(7, 0, 211, 1) 100%);
}
html::-webkit-scrollbar-thumb {
background: transparent;
box-shadow: 0px 0px 0px 100vh black;
}Limitaciones y Alternativas
Aunque la personalización de barras de desplazamiento es efectiva, tiene limitaciones como la falta de soporte cruzado del navegador y la incapacidad de agregar transiciones o animaciones. Alternativas como las bibliotecas SimpleBar y Overlay Scrollbars ofrecen soluciones, proporcionando barras de desplazamiento personalizadas con un enfoque más sencillo y mayor compatibilidad.
En conclusión, este tutorial te ha proporcionado una comprensión sólida de cómo funciona la personalización de barras de desplazamiento en CSS. ¡Si tienes alguna pregunta, déjanos un comentario y estaremos encantados de ayudarte!