Cómo agregar flechas con -webkit-scrollbar-button

6 minutos de lectura

Tengo una barra de desplazamiento personalizada. Desde que hice eso, las flechas de la barra de desplazamiento ya no se muestran.

.scrollbar::-webkit-scrollbar-thumb {
    background-color: ##00a7e0;
  }

  .scrollbar::-webkit-scrollbar-track {
    background-color: #F5F5F5;
  }

  .scrollbar::-webkit-scrollbar-button {
    ????;
  }

¿Qué tengo que agregar en .scrollbar::-webkit-scrollbar-button para que mis flechas se muestren nuevamente?

  • Similar –> stackoverflow.com/questions/16761611/agregando-flechas-a-la-barra-de-desplazamiento

    – sol

    30 de noviembre de 2017 a las 15:28

  • @ovokuro También he visto esta publicación, pero ¿es realmente la única solución? ¿Solo puedes agregar las flechas junto a una imagen?

    – Gato azul

    30 de noviembre de 2017 a las 15:51

(Súper tarde a la fiesta, pero aún así)

Puede aplicar estilo a los botones de la barra de desplazamiento utilizando el selector de botones de la barra de desplazamiento ::-webkit (consulte esta entrada de blog para obtener un desglose completo de los pseudoselectores de la barra de desplazamiento del webkit), pero hacer que muestren flechas es mucho más complicado, y la mayoría de las personas parecen usar imágenes de fondo u omitir botones por completo.

Aquí hay una solución usando triángulos CSS para flechas:

https://stackoverflow.com/a/46229219/1202275

y otro (basado en el anterior, solo barra de desplazamiento vertical pero la idea es la misma):

::-webkit-scrollbar {
  width: 16px;
  border: 5px solid white;

}

::-webkit-scrollbar-thumb {
  background-color: #b0b0b0;
  background-clip: padding-box;
  border: 0.05em solid #eeeeee;
}

::-webkit-scrollbar-track {
  background-color: #bbbbbb;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 13px;
  width: 16px;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #555555 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: #555555 transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: #777777 transparent transparent transparent;
}

(https://codepen.io/DarthVeyda/pen/eLLbXa)

  • Parece que -webkit-scrollbar-button ya no funciona? Estoy en una Mac y no se muestra al menos

    – Zach Saucier

    25 de febrero a las 15:55


Avatar de usuario de Patrik Laszlo
Patrik Laszló

Una versión más nueva y mejor es esta: ¿Cómo cambio a la barra de desplazamiento oscura de Chrome como lo hace GitHub?


aquí está la barra de desplazamiento completa con botones con modo oscuro:

https://codepen.io/patrikx3/pen/ZEBQQyV

::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
    background-color: rgb(64, 64, 64);
}

::-webkit-scrollbar-thumb {
    background-color: rgb(96, 96, 96);
    background-clip: padding-box;
    border: 2px solid transparent;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgb(112, 112, 112);
}

::-webkit-scrollbar-thumb:active {
    background-color: rgb(128, 128, 128);
}

/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: rgb(64, 64, 64);

    display: block;
    background-size: 10px;
    background-repeat: no-repeat;
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    height: 12px;
    width: 16px;
    background-position: center 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(96, 96, 96)"><polygon points="50,00 0,50 100,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(112, 112, 112)"><polygon points="50,00 0,50 100,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(128, 128, 128)"><polygon points="50,00 0,50 100,50"/></svg>");
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    height: 12px;
    width: 16px;
    background-position: center 2px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(96, 96, 96)"><polygon points="0,0 100,0 50,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(112, 112, 112)"><polygon points="0,0 100,0 50,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(128, 128, 128)"><polygon points="0,0 100,0 50,50"/></svg>");
}

/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
    height: 12px;
    width: 12px;
    background-position: 3px 3px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(96, 96, 96)"><polygon points="0,50 50,100 50,0"/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(112, 112, 112)"><polygon points="0,50 50,100 50,0"/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(128, 128, 128)"><polygon points="0,50 50,100 50,0"/></svg>");
}

/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
    height: 12px;
    width: 12px;
    background-position: 3px 3px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(96, 96, 96)"><polygon points="0,0 0,100 50,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(112, 112, 112)"><polygon points="0,0 0,100 50,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:increment:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(128, 128, 128)"><polygon points="0,0 0,100 50,50"/></svg>");
}

  • Una versión más nueva y mejor es esta: stackoverflow.com/questions/65940522/…

    -Patricio Laszlo

    7 febrero 2022 a las 19:54


  • Su codificación SVG en los triángulos de desplazamiento me ayudó en esta publicación.

    – Volomike

    6 de junio de 2022 a las 0:16

  • Parece que -webkit-scrollbar-button ya no es compatible con Chrome? Estoy en una Mac y no se muestra al menos

    – Zach Saucier

    25 de febrero a las 15:56


Aquí hay una versión ligera.

::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-track {
    background-color:#eee;
}

::-webkit-scrollbar-thumb {
    background-color: #8f8e8e;
    background-clip: padding-box;
    border: 2px solid transparent;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgb(112, 112, 112);
}

::-webkit-scrollbar-thumb:active {
    background-color: rgb(128, 128, 128);
}

/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: #eee;
    display: block;
    background-size: 10px;
    background-repeat: no-repeat;
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    height: 12px;
    width: 16px;
    background-position: center 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(73, 73, 73)"><polygon points="50,00 0,50 100,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(112, 112, 112)"><polygon points="50,00 0,50 100,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(128, 128, 128)"><polygon points="50,00 0,50 100,50"/></svg>");
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    height: 12px;
    width: 16px;
    background-position: center 2px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(73, 73, 73)"><polygon points="0,0 100,0 50,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(112, 112, 112)"><polygon points="0,0 100,0 50,50"/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment:active {
    background-image

  • ¿Qué hay de las flechas horizontales?

    – suhailvs

    29 de marzo de 2021 a las 6:21

  • copie la vertical y simplemente cámbiela a horizontal.

    – Ram Alcántara

    13 abr 2021 a las 23:47

Aquí hay un diseño más impresionante. Código abierto

Triángulo usado SVG convertido a URI de datos

::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-radius: 5px 5px 0 0;
  height: 16px;
  width: 16px;
  background-position: center 4px;
  background-image: url("data:image/svg+xml;utf8,<svg 
  xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="rgb(121, 
  255, 108)"><polygon points="50,00 0,50 100,50"/></svg>");
}

¿Ha sido útil esta solución?