JSFiddle - React, Tailwind, and code Playground

by Slee

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personalizar Barra de Scroll</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="content">
        <h1>Personaliza la Barra de Scroll</h1>
        <p>Este es un ejemplo sencillo de cómo personalizar la barra de scroll con CSS.</p>
        <p>Agrega más contenido aquí para ver cómo se desplaza la página...</p>
    </div>
</body>
</html>

CSS

body{padding-bottom:20em}
/* Personalización de la barra de scroll */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

::-webkit-scrollbar-thumb {
    background-color: #3498db;    
    border-radius: 10px;       
    border: 3px solid #ffffff;
}

/* Opcional: efectos de animación */
::-webkit-scrollbar-thumb:hover {
    background-color: #2980b9;
}