Esta es mi primera publicación. Soy nuevo en la codificación y estoy tratando de codificar mis estudios de casos para mi cartera. Quiero incluir una "barra de desplazamiento" para que funcione como una especie de línea de tiempo en el lado izquierdo que está "fijo" para que se llene a medida que se desplaza hacia abajo en la página. Este sitio web tiene algo parecido a lo que busco lograr. tienen una pequeña "barra de desplazamiento" roja en el lado izquierdo.
Una forma sencilla es dividir la posición de desplazamiento por la altura del objeto del cuerpo.
La altura del cuerpo del objeto se puede obtener con var numerator = document.body.scrollTop . Su posición de desplazamiento es un poco más complicada. Querrá la altura del elemento menos el poder del puerto de visualización. Esto se puede hacer con
var denominator = document.documentElement.scrollHeight - document.documentElement.clientHeighta partir de ahí, configura un detector de eventos que establece la altura de su elemento de la barra de desplazamiento como un porcentaje de la altura de la vista al desplazarse.
document.addEventListener('scroll', function(e) { document.getElementById('scrollBar').style.height = numerator/denominator + '%' });Puede haber mejores maneras de hacer esto, pero esta es la primera que me viene a la mente.
Modifiqué la respuesta de alleynraven y la puse en codepen .
var $scrollEl = document.querySelector('.scroll-progress') document.addEventListener('scroll', function(e) { var currentPos = document.documentElement.scrollTop; var scrollPos = document.documentElement.scrollHeight - document.documentElement.clientHeight; $scrollEl.style.height = (currentPos / scrollPos * 100) + '%'; }); .scroll-progress { position: fixed; left: 0; top: 0; width: 8px; background-color: rgb(248 113 113); } .bg-blue { background-color: rgb(186 230 253); } .bg-teal { background-color: rgb(153 246 228); } .bg-lime { background-color: rgb(217 249 157); } .bg-yellow { background-color: rgb(254 240 138); } <div class="scroll-progress"></div> <div class="content"> <div class="bg-blue" style="height: 1000px;"></div> <div class="bg-teal" style="height: 1000px;"></div> <div class="bg-lime" style="height: 1000px;"></div> <div class="bg-yellow" style="height: 1000px;"></div> </div>