Playground de scrollbar en CSS

Explora scrollbar-color, scrollbar-width y scrollbar-gutter con una previsualización que fuerza scroll vertical y genera el CSS listo para copiar.

Este bloque fuerza scroll vertical para que puedas revisar la barra mientras cambias sus propiedades.

scrollbar-color define el color del thumb y del track usando la sintaxis estándar de CSS.

scrollbar-width permite alternar entre auto, thin y none sin recurrir a pseudoelementos propietarios.

scrollbar-gutter reserva espacio para la barra y ayuda a evitar saltos en el contenido cuando aparece el scroll.

HTML

<div class="scrollbar-demo">
  <p>
    Scrollbars are part of the interface. Use this content block to test
    scrollbar-color, scrollbar-width, and scrollbar-gutter while the element
    keeps enough text to overflow vertically.
  </p>
  <p>
    Add real content here and check how the reserved gutter changes the
    reading area when the scrollbar is visible.
  </p>
</div>

CSS

.scrollbar-demo {
  overflow-y: scroll;
  scrollbar-color: #38d5b2 #232946;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}