TODO SOBRE INFORMÁTICA Y TECNOLOGÍA




Cómo cambiar el estilo de las barras de desplazamiento






Durante la navegación por Internet existe una herramienta que nos acompaña constantemente y que influye en la apariencia de nuestras páginas web. Hablo de la barra de desplazamiento de navegación, muchos no saben que es posible personalizar este elemento para obtener el aspecto deseado y mejorar la representación estética de las páginas de Internet.
En este artículo veremos cómo es posible personalizar la barra de desplazamiento de navegación utilizando el código CSS.

Comencemos creando un nuevo documento HTML y configurando la estructura de la página.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to change the style of the scrollbars</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to change the style of the scrollbars</title>
</head>
<body>
</body>
</html>

Una vez hecho esto, insertamos algunos elementos en la página para aumentar la altura del documento y activar la barra de desplazamiento de navegación vertical.

<body> <p> Al hacer clic en "Aceptar todo", acepta estos propósitos. Para más información, para proporcionar o retirar da su consentimiento para procesar sus datos personales, haga clic en "Administrar cookies+". Además, puede hacer ejercicio sus preferencias de consentimiento a nivel de proveedor en el enlace "Proveedores". Estos ajustes son accesibles en un sitio o aplicación específica, en cualquier momento a través del enlace 'Gestionar cookies+' ubicado en el pie de página de las páginas web o en la configuración de la aplicación. Trabajamos en coordinación con un marco de la industria que señalará sus preferencias a nuestros proveedores participantes.Proveedores </p> /*….copiamos el párrafo varias veces para aumentar la altura de la página*/ </body>

<body>
<p>
Al hacer clic en "Aceptar todo", acepta estos propósitos. Para más información, para proporcionar o retirar
da su consentimiento para procesar sus datos personales, haga clic en "Administrar cookies+". Además, puede hacer ejercicio
sus preferencias de consentimiento a nivel de proveedor en el enlace "Proveedores". Estos ajustes son accesibles
en un sitio o aplicación específica, en cualquier momento a través del enlace 'Gestionar cookies+' ubicado en el
pie de página de las páginas web o en la configuración de la aplicación. Trabajamos en coordinación con un marco de la industria
que señalará sus preferencias a nuestros proveedores participantes.Proveedores
</p>
/*….copiamos el párrafo varias veces para aumentar la altura de la página*/
</body>


Luego usamos la etiqueta <style></style> para definir las primeras reglas de estilo en relación con el cuerpo y
el párrafo insertado en su interior.

body{
margin: 0px;
background-color:f1f1f1;
}
p{
margin: 50px;
}

body{
margin: 0px;
background-color:f1f1f1;
}
p{
margin: 50px;
}


Ahora es el momento de trabajar en la barra de desplazamiento de navegación actuando sobre las siguientes reglas CSS que insertamos
dentro de la etiqueta <estilo></estilo>

html::-webkit-scrollbar {
width: 20px;
}

html::-webkit-scrollbar {
width: 20px;
}


De esta manera estamos definiendo el ancho de la barra que debe ser de 20px de ancho.


pista y pulgar

Ahora entremos aún más en detalle y analicemos los dos elementos principales que le permiten personalizar la navegación, el elemento llamado track y el elemento thumb.

Trabajando sobre el primer elemento, es decir, la pista, es posible definir el estilo de la macro sección vertical. En este caso le asignamos el color de fondo #ccc y una ligera sombra interior.

html::-webkit-scrollbar-track {
background: #ccc;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

html::-webkit-scrollbar-track {
background: #ccc;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}






Actuando en cambio sobre el segundo elemento, pulgar, podemos indicar todos los detalles que debe tener el componente móvil.

html::-webkit-scrollbar-thumb {
background: #0066ce;
}

html::-webkit-scrollbar-thumb {
background: #0066ce;
}






Además de actuar sobre la barra de desplazamiento del navegador, es posible personalizar un elemento <div></div> al que se le haya asignado la propiedad overflow: scroll recuperando el nombre del elemento y añadiendo posteriormente el ::-webkit -scrollbar regla.
Ofrecemos un ejemplo para entender mejor. Vamos a crear un elemento <div></div> separado de la navegación vertical predeterminada y comenzar a personalizar la barra de desplazamiento interna. El elemento recién creado debe tener un nombre de ID o CLASE que lo distinga y permita llamarlo con CSS.

<div class="container"> <p> Al hacer clic en "Aceptar todo", acepta estos propósitos. Para más información, para proporcionar o retirar da su consentimiento para procesar sus datos personales, haga clic en "Administrar cookies+". Además, puede hacer ejercicio sus preferencias de consentimiento a nivel de proveedor en el enlace "Proveedores". Estos ajustes son accesibles en un sitio o aplicación específica, en cualquier momento a través del enlace 'Administrar cookies+' ubicado en el pie de página de páginas web o en la configuración de la aplicación. Trabajamos en coordinación con un marco de la industria que señale sus preferencias a nuestros vendedores participantes.Vendedores </p> /*….we copy the paragraph several times to increase the height of the page*/ </div>

<div class="container">
<p>
Al hacer clic en "Aceptar todo", acepta estos propósitos. Para más información, para proporcionar o retirar
da su consentimiento para procesar sus datos personales, haga clic en "Administrar cookies+". Además, puede hacer ejercicio
sus preferencias de consentimiento a nivel de proveedor en el enlace "Proveedores". Estos ajustes son accesibles
en un sitio o aplicación específica, en cualquier momento a través del enlace 'Administrar cookies+' ubicado en el pie de página
de páginas web o en la configuración de la aplicación. Trabajamos en coordinación con un marco de la industria que
señale sus preferencias a nuestros vendedores participantes.Vendedores
</p>
/*….we copy the paragraph several times to increase the height of the page*/
</div>



Ahora personalice el estilo actuando primero en el elemento <div class="container"></div> e indicando el tamaño del contenedor dentro del cual deben estar presentes los elementos internos.

.container {
width: 500px;
height: 300px;
margin: 50px;
overflow: auto;
padding: 20px;
background-color: #fff;
}

.container {
width: 500px;
height: 300px;
margin: 50px;
overflow: auto;
padding: 20px;
background-color: #fff;
}


Posteriormente, como se hizo anteriormente, podemos asignar el estilo a los elementos que caracterizan la barra de desplazamiento indicando el nombre de nuestro contenedor.

.container::-webkit-scrollbar {
width: 12px;
}
.container::-webkit-scrollbar-track {
background-color: #ccc;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
.container::-webkit-scrollbar-thumb {
background-color: #0066ce;
border-radius: 10px;
}

.container::-webkit-scrollbar {
width: 12px;
}
.container::-webkit-scrollbar-track {
background-color: #ccc;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
.container::-webkit-scrollbar-thumb {
background-color: #0066ce;
border-radius: 10px;
}


Como habrás notado, a diferencia del primer ejemplo, en este caso hemos redondeado las esquinas de la barra de desplazamiento.
Esto significa que será posible personalizar aún más este elemento y hacerlo coordinado con el aspecto estético de las páginas Web o sitios de Internet que estemos desarrollando.
Continuemos y veamos cómo personalizar aún más la barra de desplazamiento.
Cambiemos las propiedades insertadas dentro de nuestro contenedor y reemplacemos el elemento pulgar con una imagen de nuestro agrado.

.container::-webkit-scrollbar {
width: 30px;
}
.container::-webkit-scrollbar-track {
background-color: transparent;
}
.container::-webkit-scrollbar-thumb {
background-image: url('arrow-down.png');
background-repeat: no-repeat, no-repeat;
background-size: 30px;
}

.container::-webkit-scrollbar {
width: 30px;
}
.container::-webkit-scrollbar-track {
background-color: transparent;
}
.container::-webkit-scrollbar-thumb {
background-image: url('arrow-down.png');
background-repeat: no-repeat, no-repeat;
background-size: 30px;
}


Al asignar una imagen de fondo al elemento del pulgar, el elemento se parece a nuestra imagen.
El resultado que obtendremos será el siguiente:


La propiedad del gradiente

Veamos un último ejemplo y creemos una barra de desplazamiento con colores degradados aplicándole la propiedad degradado de la siguiente manera:

.container::-webkit-scrollbar {
width: 12px;
border-radius: 10px;
}
.container::-webkit-scrollbar-track {
border-radius: 10px;
border: 1px solid #cacaca;
background-color: #f1f1f1;
box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
}
.container::-webkit-scrollbar-thumb {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, #a520ca), color-stop(1, #2681cc));
border-radius: 10px;
}

.container::-webkit-scrollbar {
width: 12px;
border-radius: 10px;
}
.container::-webkit-scrollbar-track {
border-radius: 10px;
border: 1px solid #cacaca;
background-color: #f1f1f1;
box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
}
.container::-webkit-scrollbar-thumb {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, #a520ca), color-stop(1, #2681cc));
border-radius: 10px;
}


En este caso siempre hemos actuado sobre el elemento pulgar, pero asignándole un degradado vertical personalizado y obteniendo así el aspecto estético deseado.

Descargar software

Cómo cambiar el estilo de las barras de desplazamiento

pista y pulgar

La propiedad del gradiente