Maison > Questions et réponses > le corps du texte
Je souhaite calculer la position de défilement d'un élément dans une fenêtre en pourcentage.
Je suis proche, mais je sais que je pense que quelque chose ne va pas en mathématiques. J'ai fait une petite démo pour afficher le pourcentage de défilement de plusieurs éléments, mais les pourcentages sont tous faux.
function getElemScrollPercent(selector){ const scale = 0.1; const el = document.querySelector(selector); const out = el.querySelector('.out'); function calc(){ const rect = el.getBoundingClientRect(); //don't bother calculating if it's off screen if (rect.top < window.innerHeight && rect.bottom > 0) { const total = (window.scrollY) / (rect.bottom + rect.height); const pct = total * 100; out.innerHTML = `${Math.round(pct)}%`; } } window.addEventListener('scroll', calc); calc(); } getElemScrollPercent('#one'); getElemScrollPercent('#two'); getElemScrollPercent('#three');
* { box-sizing: border-box; } body { display: flex; flex-direction: column; min-height: 400vh } section { height: 100vh; position: relative; border: 1px solid black; } #one { background:#d1b4b4; } #two { background:#b4d1bc; } #three { background:#b4b5d1; } .out { position: sticky; top: 0; display: inline-block; padding: .5rem; background: #CCC; }
<section id="one"> <span class='out'>%</span> </section> <section id="two"> <span class='out'>%</span> </section> <section id="three"> <span class='out'>%</span> </section>
P粉1781328282024-04-04 16:34:28
Comme vous l'avez souligné, je pense qu'il y a quelque chose qui ne va pas dans vos calculs dans ces lignes :
const total = (window.scrollY) / (rect.bottom + rect.height); const pct = total * 100;
Essayez de changer ces lignes avec :
const scrollableDistance = window.innerHeight + rect.height; const scrolled = window.innerHeight - rect.top; const pct = (scrolled / scrollableDistance) * 100;
Veuillez me dire si cela résout votre problème afin que je puisse vous faire d'autres suggestions.