Tabla de contenido

1. Introducción

Este artículo presenta cómo personalizar sus propias barras de desplazamiento para sus propias páginas web.

2. Texto

Dado que la barra de desplazamiento es en realidad un elemento controlado por el navegador la mayor parte del tiempo, solo podemos afectar su estilo a través de algunas pseudoclases. Esta película presenta el método de escritura que se usa especialmente para tener efecto en el motor de webkit .

2.1 desbordamiento

El atributo de desbordamiento especifica la escena en la que se desborda el contenido, subdividido en desbordamiento-x y desbordamiento-y especifica el efecto de desbordamiento en dos direcciones respectivamente

desbordamiento: oculto o desbordamiento: visible simplemente muestra u oculta el contenido
desbordamiento: desplazarse Aparece una barra de desplazamiento
desbordamiento: auto se desplaza automáticamente en la dirección deseada

Aviso:

El significado de auto no aparece solo cuando se desplaza, sino que solo aparece en la dirección correspondiente

2.2 ::webkit-barra de desplazamiento

::-webkit-scrollbar: barra de desplazamiento completa

::-webkit-scrollbar-button: botón en la barra de desplazamiento (flechas arriba y abajo)

::-webkit-scrollbar-thumb: Pulgar de la barra de desplazamiento en la barra de desplazamiento

::-webkit-scrollbar-track: Pista de la barra de desplazamiento

::-webkit-scrollbar-track-piece: La pieza de seguimiento de la barra de desplazamiento sin control deslizante

::-webkit-scrollbar-corner: La esquina que se encuentra cuando hay desplazamiento vertical y horizontal

::-webkit-resizer: Estilo parcial de la parte de la esquina de ciertos elementos

2.3 Ejemplo de código

@gray-1: #ffffff;
@gray-2: #fafafa;
@gray-3: #f5f5f5;
@gray-4: #f0f0f0;
@gray-5: #d9d9d9;
@gray-6: #bfbfbf;
@gray-7: #8c8c8c;
@gray-8: #595959;
@gray-9: #434343;
@gray-10: #262626;
@gray-11: #1f1f1f;
@gray-12: #141414;
@gray-13: #000000;

#custom_colors() {
    color_1: #438efd;
    color_2: #f2f9ff;
    color_3: #d5ebff;
}

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

::-webkit-scrollbar-track {
  width: 8px;
  background-color: rgba(217, 217, 217, 0.2);
  box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  width: 8px;
  box-shadow: inset 0 0 6px @gray-6;
  -webkit-box-shadow: inset 0 0 6px @gray-6;
  background-color: #custom_colors[color_2];
  background-clip: padding-box;
  border-radius: 5px;
  &:hover,
  &:active {
    background-color: #custom_colors[color_3];
  }
}

::-webkit-scrollbar-corner {
  background-color: @gray-1;
}

2.4 Darse cuenta del efecto

En estado de foco,

Implementación del estilo de barra de desplazamiento personalizado de front-end