Seguramente navegando por la red te has encontrado con sitios web que tienen una barra de desplazamiento personalizada y probablemente estés buscando la manera de hacer lo mismo para tu sitio web creado con divi. En este tutorial te mostraré cómo cambiar la apariencia de la barra de desplazamiento de forma muy fácil y rápida.
Si te has dado una vuelta por el apartado snippets que tengo en este sitio, seguramente ya viste que tenemos un fragmento de código CSS para personalizar la barra de desplazamiento nativa de forma muy fácil. Ese código css te puede venir bien si solo quieres cambiar la apariencia de la barra de desplazamiento que viene por defecto con los navegadores.
Pero en esta ocasión vamos a ir un paso más allá, es decir, vamos a crearnos nuestra propia barra de navegación para aplicarle un efecto más interesante. El efecto que vamos a realizar será una barra transparente que se va ir mostrando y rellenando con un color gradiente conforme vayamos haciendo scroll sobre la página ¿suena interesante verdad?
Para realizar este tutorial vamos a necesitar de pequeños fragmetos de código CSS para darle los estilos a la barra y un poco de javascript para activar la funcionalidad de la misma. Pero no te preocupes, tú solo tienes que copiar y pegar los fragmentos de código que te dejo a continuación…
Primero necesitamos agregar los contenedores de la barra de navegación, eso lo haremos a través de estos divs html:
<div id="progressBar"></div> <div id="progressBarContainer"></div>
Posteriormente necesitamos darle estilos a esos divs mediante el siguiente fragmento de código CSS:
html {
overflow: -moz-scrollbars-none;
scrollbar-width: none;
}
::-webkit-scrollbar {
width: 0;
background: transparent;
}
#progressBarContainer {
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: rgba(255, 255, 255, 0.05);
}
#progressBar {
position: fixed;
top: 0;
right: 0;
width: 10px;
background: linear-gradient(to top, violet, red);
height: 0;
opacity: 0;
}
Y para activar la funcionalidad vamos a requerir del siguiente código javascript:
<script>
const progressBar = document.querySelector("#progressBar");
let totalPageHeight = document.body.scrollHeight - window.innerHeight;
window.onscroll = () => {
let newProgressHeight = (window.pageYOffset / totalPageHeight) * 100;
progressBar.style.height = `${newProgressHeight}%`;
progressBar.style.opacity = `${newProgressHeight}%`;
};
</script>
Si no sabes dónde tienes que colocar cada uno de estos fragmentos de código, no esperes más y dale play al video…
0 comentarios