Comment calculer le pourcentage de position de défilement d'un élément ?

Question

Je souhaite calculer la position de défilement d'un élément dans une fenêtre en pourcentage.

• 0% est l'endroit où le haut de l'élément se trouve en bas de la fenêtre (pas encore affiché)
• 100% est la position où le bas de l'élément est en haut de la fenêtre (tous les éléments sont affichés)

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>

Answer 1

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.