Barras de scroll en CSS

Ya hay una manera estándar, y los viejos pseudoelementos de cada navegador aún hacen más.

.panel {
  overflow-y: auto;
  max-block-size: 24rem;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  scrollbar-gutter: stable both-edges;
}

.panel::-webkit-scrollbar { inline-size: 8px; }

.panel::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.panel::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

Cómo funciona

1. scrollbar-width y scrollbar-color son la respuesta estándar de dos propiedades.
2. scrollbar-gutter: stable reserva el espacio para que el contenido no salte.
3. Nunca escondas la barra en una región que solo se desplaza con la rueda.

Palabras clave y builtins usados aquí

• background
• px
• rem

El intento, en números

Líneas

16

Caracteres a escribir

342

Tokens

67

Ritmo de tres estrellas

90 tpm

Al ritmo de tres estrellas de 90 tokens por minuto, este intento toma unos 45 segundos.

Escribe este fragmento

Paso 2 de 3 en Texto y scroll; paso 8 de 13 en Dar estilo a componentes.

← Anterior Siguiente →