top of page

Barras laterales para tu pagina web

INSTALACIÓN


Insertar código CSS Vamos a Tema > Editar HTML > CTRL + F > Buscamos }]]></b:skin> y antes de }]]></b:skin> pegamos el siguiente código CSS.


body::-webkit-scrollbar {
  width: var(--scroll-size, 10px);
  height: var(--scroll-size, 10px);
}
body::-webkit-scrollbar-track {
  background-color: var(--scroll-track, transparent);
  border-radius: var(--scroll-track-radius, var(--scroll-radius));
}
body::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb-color, grey);
  background-image: var(--scroll-thumb, none);
  border-radius: var(--scroll-thumb-radius, var(--scroll-radius));
}

SOPORTE PARA FIREFOX


Insertar código CSS Vamos a Tema > Editar HTML > CTRL + F > Buscamos }]]></b:skin> y antes de }]]></b:skin> pegamos el siguiente código CSS.


html, body {
  scrollbar-color: var(--scroll-thumb-color, grey) var(--scroll-track, transparent);
  scrollbar-width: thin;
}

Ahora si lo importante las barras de desplazamiento.

En la misma ubicación }]]></b:skin> pegamos el siguiente código CSS de la barra de desplazamiento la cual desee.


BARRA DE DESPLAZAMIENTO 1

body::-webkit-scrollbar { width: 8px; } body::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.4); border-radius: 10px; } body::-webkit-scrollbar-thumb { background-color: #dfdfdf; border-radius: 10px; }

BARRA DE DESPLAZAMIENTO 2


body::-webkit-scrollbar { width: 5px; } body::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, 0.1); border-radius: 10px; } body::-webkit-scrollbar-thumb { background-color: #11171a; border-radius: 10px; }

BARRA DE DESPLAZAMIENTO 3


body::-webkit-scrollbar { width: 10px; } body::-webkit-scrollbar-track { background-color: transparent; border-radius: 10px; } body::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.4); border-radius: 10px; }

BARRA DE DESPLAZAMIENTO 4


body::-webkit-scrollbar { width: 12px; } body::-webkit-scrollbar-track { border-radius: 10px; background-color: rgba(0, 0, 0, 0.4); } body::-webkit-scrollbar-thumb { background-color: #e78632; background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%); border-radius: 10px; }

BARRA DE DESPLAZAMIENTO 5


body::-webkit-scrollbar { width: 15px; } body::-webkit-scrollbar-track { border-radius: 10px; background-color: rgba(255, 255, 255, 0.1); } body::-webkit-scrollbar-thumb { background-image: linear-gradient(45deg, #00aeff, #a68eff); border-radius: 10px; -webkit-box-shadow: rgba(0,0,0,.12) 0 3px 13px 1px; }

BARRA DE DESPLAZAMIENTO 6


body::-webkit-scrollbar { width: 12px; } body::-webkit-scrollbar-track { border-radius: 10px; background-color: rgba(0, 0, 0, 0.4); } body::-webkit-scrollbar-thumb { background-color: #aab74d; background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%); border-radius: 10px; }

BARRA DE DESPLAZAMIENTO 7


::-webkit-scrollbar {
background:#fff;
width:10px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #62ABD2 10%,#62ABD2 51%);
}
::-webkit-scrollbar-track {
}

 

EXPLICACIÓN


elementos disponibles para personalizar la barra desplazamientos en navegadores webkit son los siguientes:


::-webkit-scrollbar {} /* Barra de desplazamiento */
::-webkit-scrollbar-button {} /* Flechas */
::-webkit-scrollbar-thumb {} /* indicador de desplazamiento*/
::-webkit-scrollbar-track {} /* Contenedor de la barra de progreso */
::-webkit-scrollbar-track-piece {} /* barra de progreso*/
::-webkit-scrollbar-corner {} /* Esquina inferior de las barras de desplazamiento */
::-webkit-resizer {} /* Arrastrable para cambiar de tamaño */

Solo debes usar las que necesites para las modificaciones que intentas conseguir, no es obligatorio utilizar todas las reglas.

 

Cualquier duda quedo atento a los comentarios.

2 visualizaciones0 comentarios

Entradas Recientes

Ver todo

Comentarios


bottom of page