const rightSide = document.querySelector("#rightSide"); let scrollPercentage = () => { let h = document.documentElement; let st = h.scrollTop || document.body.scrollTop; let sh = h.scrollHeight || document.body.scrollHeight; let percent = st / (sh - h.clientHeight) * 100; console.log(percent); } rightSide.onscroll = scrollPercentage; .right-side { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 90%; width: 90%; background-color: #eee; overflow-y: scroll; } .top-page { width: 100%; height: 100%; background-color: red; } .bot-page { width: 100%; height: 100%; background-color: yellow; } <div class="right-side" id="rightSide"> <div id="top-page" class="top-page"></div> <div id="bot-page" class="bot-page"></div> </div>Estoy creando un sitio web y quiero obtener el porcentaje de desplazamiento de un div. Usé el video de Tyler Pott en YouTube https://youtu.be/-FJSedZAers y lo hace en toda la página (usando el cuerpo). Y este es mi código:
const rightSide = document.querySelector("#rightSide") let scrollPercentage = () => { let h = document.documentElement; let st = h.scrollTop || document.body.scrollTop; let sh = h.scrollHeight || document.body.scrollHeight; let percent = st / (sh - h.clientHeight) * 100; console.log(percent); } rightSide.onscroll = scrollPercentage;Cuando ejecuto esto, la consola solo genera "NaN", lo cual es de esperar. No estoy seguro de qué debo hacer para transferir ese código a los divs. He tratado de usar cosas como
const topPage = document.querySelector("#top-page"); Y luego agregue topPage en lugar del cuerpo en document.body.scrollTop etc. pero eso obviamente no funciona.
Así es como se ve el HTML, y la página superior tiene un ancho y una altura del div del lado derecho y la página inferior tiene el mismo ancho pero una altura mínima del div del lado derecho.
<div class="right-side" id="rightSide"> <div id="top-page" class="top-page"></div> <div id="bot-page" class="bot-page"></div> </div>Volviendo a esto, sabía que tenía que entender los valores asignados a las variables para simplificar la ecuación.
Entonces, una búsqueda rápida de documentElement me llevó a esta respuesta:
"documentElement devuelve el Elemento que es el elemento raíz del documento (por ejemplo, el elemento para documentos HTML)"
Entonces, me di cuenta de que tal vez ese es el problema y lo era. Asigné rightSide a h y eso es todo lo que se necesitaba.
let h = rightSide;
No estoy seguro si esto es completamente correcto, a veces al final del desplazamiento puedes obtener 100.05 o más, pero no necesitaba el número exacto. Espero que esto ayude.