Cómo cambiar el estilo de las barras de desplazamiento con CSS

Ultima actualización en
martes 15º mar. 2022

CSS Scrollbar

personalizar barra scroll css

  • En septiembre de 2018, las barras de desplazamiento de CSS de W3C definieron especificaciones para personalizar el aspecto de las barras de desplazamiento con CSS.
  • A partir de 2020, 96 % de los usuarios de Internet ejecutan navegadores que admiten el estilo de barra de desplazamiento de CSS.
  • Sin embargo, deberá escribir dos conjuntos de reglas de CSS para abarcar Blink y WebKit y también los navegadores de Firefox..

CSS Scrollbar Style

  • Las barras de desplazamiento CSS son compatibles con Firefox y ::-webkit-scrollbar con Chromium (Chrome, Edge) y Safari.
  • Todos los navegadores modernos eventualmente pasarán a la especificación CSS Scrollbars.
  • Actualmente, las barras de desplazamiento de estilo para Chrome, Edge y Safari están disponibles con el prefijo de proveedor pseudo-elemento -webkit-scrollbar.

La propiedad scrollbar-color CSS establece el color de la pista y el pulgar de la barra de desplazamiento.

Custom Css CodePen

webkit scrollbar

custom scrollbar css

	/* Firefox */
* {
  scrollbar-width: thick; /* none | auto  */
  scrollbar-color: #ffa07a transparent;
}

/* El primero se aplica al pulgar de la barra de desplazamiento, el segundo a la pista. */
/* Firefox */

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: 14px; /* vertical scrollbar */
  height: 14px; /* horizontal scrollbar */
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: #ffa07a;
  border-radius: 14px;
  border: calc(14px / 4) solid #ccc;
}

*::-webkit-scrollbar-thumb:hover {
  background: #ff7f50;
}
/* Chrome, Edge, Safari */
	

scroll y css

Actualmente, las barras de desplazamiento de estilo para Chrome, Edge y Safari están disponibles con el prefijo de proveedor pseudo-elemento -webkit-scrollbar.

References