W3docs
es
Iniciar sesión

Propiedad scrollbar de CSS

Usa la propiedad scrollbar de CSS para crear temas personalizados para las barras de desplazamiento. Ve valores y ejemplos.

El conjunto de pseudoelementos CSS ::-webkit-scrollbar es un enlace de estilo propietario que permite a los diseñadores crear temas personalizados para las barras de desplazamiento nativas del navegador.

Información

Estos pseudoelementos están expuestos bajo el prefijo de proveedor -webkit y son compatibles principalmente con los navegadores basados en Chromium. No son compatibles con Firefox ni Safari. Para una compatibilidad más amplia con los navegadores, considera usar las propiedades estándar scrollbar-width y scrollbar-color.

Los pseudoelementos ::-webkit-scrollbar se componen de siete partes diferentes que, en conjunto, conforman un elemento de interfaz de barra de desplazamiento completo. Estos siete pseudoelementos son los siguientes:

  • ::-webkit-scrollbar
  • ::-webkit-scrollbar-button
  • ::-webkit-scrollbar-track
  • ::-webkit-scrollbar-track-piece
  • ::-webkit-scrollbar-thumb
  • ::-webkit-scrollbar-corner
  • ::-webkit-scrollbar-resizer

Una barra de desplazamiento solo aparece cuando el contenido de un elemento es más grande que su caja, por lo que aplicarle estilos va de la mano con la familia de propiedades overflow — overflow-x y overflow-y te permiten controlar el desplazamiento horizontal y vertical de forma independiente.

Sintaxis

Para dar estilo a las barras de desplazamiento, se aplican reglas CSS directamente a los pseudoelementos ::-webkit-scrollbar en el contenedor de desplazamiento. Puedes apuntar a cualquier elemento con overflow configurado en scroll o auto, no solo al body.

.scrolling-element::-webkit-scrollbar {
  /* scrollbar styles */
}
.scrolling-element::-webkit-scrollbar-thumb {
  /* thumb styles */
}

Ejemplo de los pseudoelementos de scrollbar:

Ejemplo de código CSS para scrollbar

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 100%;
        overflow: hidden;
      }
      body {
        height: 100%;
        background: #eee;
        overflow: scroll;
        width: 85%;
        max-width: 600px;
        margin: 0 auto;
        padding: 3em;
        font: 100%/1.4 Georgia, serif;
        border: 1px solid #666;
      }
      p {
        margin: 0 0 1.5em;
      }
      body::-webkit-scrollbar {
        width: 1em;
      }
      body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      }
      body::-webkit-scrollbar-thumb {
        background-color: #666;
        outline: 1px solid #eee;
      }
    </style>
  </head>
  <body>
    <h2>Scrollbar property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de los pseudoelementos de scrollbar con ::-webkit-scrollbar-track y ::-webkit-scrollbar-thumb:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 100%;
        overflow: hidden;
      }
      body {
        height: 100%;
        background: #ececec;
        overflow: scroll;
        width: 90%;
        max-width: 550px;
        margin: 0 auto;
        padding: 2em;
        border: 2px solid #cccccc;
      }
      p {
        margin: 0 0 1.5em;
      }
      body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
      }
      body::-webkit-scrollbar {
        width: 5px;
        background-color: #F5F5F5;
      }
      body::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Scrollbar property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>
Pruébalo tú mismo »

Barras de desplazamiento estándar compatibles con todos los navegadores

Dado que los pseudoelementos ::-webkit-scrollbar solo funcionan en navegadores basados en Chromium, el CSS Working Group introdujo dos propiedades estándar que Firefox admite hoy en día y que los motores Webkit/Blink también reconocen ahora: scrollbar-width y scrollbar-color.

  • scrollbar-width — establece el grosor. Acepta las palabras clave auto (valor predeterminado), thin o none (oculta la barra de desplazamiento mientras mantiene el elemento desplazable).
  • scrollbar-color — recibe dos colores: el color del thumb primero, luego el color del track.
.scrolling-element {
  scrollbar-width: thin;
  scrollbar-color: #666 #f5f5f5; /* thumb track */
}

Un enfoque robusto consiste en declarar primero las propiedades estándar como base, y luego agregar encima las reglas ::-webkit-scrollbar para un control más preciso en los navegadores Chromium que así lo requieran:

.scrolling-element {
  /* Standard — Firefox and modern Chromium/Safari */
  scrollbar-width: thin;
  scrollbar-color: #666 #f5f5f5;
}

/* Detailed styling — Chromium-based browsers only */
.scrolling-element::-webkit-scrollbar {
  width: 10px;
}
.scrolling-element::-webkit-scrollbar-track {
  background: #f5f5f5;
}
.scrolling-element::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 10px;
}
Información

Usa scrollbar-width: thin y scrollbar-color cuando solo necesites cambiar el color o el grosor de la barra de desplazamiento en todos los navegadores modernos. Recurre a los pseudoelementos ::-webkit-scrollbar únicamente cuando necesites dar estilo a partes individuales (botones, pieza del track, esquina) que las propiedades estándar no pueden alcanzar. El redondeo del thumb con border-radius es exclusivo de -webkit-.

Pseudoelementos

PseudoelementoDescripción
::-webkit-scrollbarLa barra de desplazamiento en sí.
::-webkit-scrollbar-buttonLos botones de la barra de desplazamiento.
::-webkit-scrollbar-trackEl track de la barra de desplazamiento.
::-webkit-scrollbar-track-pieceLa parte del track no cubierta por el handle.
::-webkit-scrollbar-thumbEl handle de desplazamiento arrastrable.
::-webkit-scrollbar-cornerLa esquina inferior de la barra de desplazamiento, donde se encuentran las barras horizontal y vertical.
::-webkit-scrollbar-resizerEl handle de redimensionamiento arrastrable que aparece en la esquina inferior de algunos elementos.

Práctica

Práctica
¿Qué propiedades de CSS se utilizan para cambiar la apariencia de las barras de desplazamiento?
¿Qué propiedades de CSS se utilizan para cambiar la apariencia de las barras de desplazamiento?
Was this page helpful?