martes, 3 de septiembre de 2019

SEO

Personalizar la barra de desplazamiento

0 comments

En este articulo te ayudaré a mejorar el aspecto de la barra de desplazamiento, de momento solo en navegadores webkit, como Opera, Chrome, Safari, UC Browser, entre otros, lamentablemente firefox e IE quedan fuera.

Para este aporte he diseñado diferentes barras de desplazamiento del cuerpo del documento, para que puedas personalizar el scrollbar usando css.

Instalar
Para agregar las barras personalizadas, ve a Blogger Temas Personalizar Opciones avanzadas Agregar CSS, en este apartado agregamos el css de los estilos que más nos gusten. Recuerda solo elegir uno:



Estilo 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;
}

Estilo 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;
}

Estilo 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;
}

Estilo 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;
}

Estilo 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;
}

Estilo 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;
}




Preciona el boton Aplicar para guardar los cambios y listo, ya tendrás el scroll de la pagina con un nuevo estilo. Recuerda que si usas Firefox o internet explorer no apreciaras los cambios.

Explicación
Los pseudo 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 */

Aunque no es obligatorio utilizar todas las propiedades, solo las necesarias para las modificaciones que intentamos conseguir. Sin embargo, si deseas saber más acerca de ello, te recomiendo el articulo de CSS-tricks sobre barras de dezplazamiento.


Eso a sido todo. Cualquier duda puedes preguntar en los comentarios, respondo a todos. Si te ha servido este aporte no olvides compartir, lo agradecere mucho. Gracias por pasar.
By en
Tags , ,