Uso de la barra de desplazamiento CSS

Prefacio:

        Uso de barras de desplazamiento css.

1. Caso de uso 1: sin fondo, solo muestra una barra de desplazamiento

Si es el conjunto predeterminado, :: es suficiente. Si es un elemento, se puede usar .abc::. Si es scss, &::

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0,0,0,0);
}

2. Caso de uso 2:

::-webkit-scrollbar {
  width: 6px;
}
//默认不展示
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0,0,0,0);
}
//划过展示，具体写法自己改改
&:hover::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0,0,0,0);
}

3. API:

::-webkit-scrollbar //La parte completa de la barra de desplazamiento
::-webkit-scrollbar-button //Botones en ambos extremos de la barra de desplazamiento
::-webkit-scrollbar-track //Pista exterior
::-webkit- scrollbar-track-piece //Pista interior, parte media de la barra de desplazamiento (eliminada)
::-webkit-scrollbar-thumb //La que se puede arrastrar dentro de la barra de desplazamiento
::-webkit-scrollbar-corner //Esquina
: :-webkit-resizer //Definir el estilo del bloque de arrastre en la esquina inferior derecha

4. Ilustración:

Enlace de referencia compatible con IE: https://www.cnblogs.com/koley...