• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

132
Views
Porcentaje de desplazamiento para un div usando javascript

 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>
about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error