Preview:
<!--ESTILOS:
- Toda la barra se llama: scrollbar(barra = en ingles "bar")
- thumb: se le llama al pulgar que esta dentro
- track: se le llama al camino, pista.
Entonces cuendo quieras editar solo tienes que combinar:
::-webkit-scrollbar{}
::-webkit-scrollbar-thumb{}
::-webkit-scrollbar-track{}
A todos puedes aplicarles: puedes aplicarle border-radious, background, etc..
EXEPTO: dimenciones como whidth(esto le corresponde a la barra (scrollbar)).
NOTA: primero se deve editar(aunque sea minimo) scrollbar sino no correra las ediciones de los 
      otros componentes     
-->

<!--TRANSICIÓN: Se le denomina Smooth Scroll al efecto de transición
-CSS: scroll-behavior: smooth; para transiciones suabes
  html {
  scroll-behavior: smooth; // se le aplica al elemento que genera el scroll, ejemp la pagina.
  }
-Javascript: 
  window.scroll({
    top: 2500, 
    left: 0, 
    behavior: 'smooth'
  }); // aplicado a la ventana principal. vea el link hay otro caso
-->
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter