Maison  >  Questions et réponses  >  le corps du texte

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

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粉786800174P粉786800174216 Il y a quelques jours561

répondre à tous(1)je répondrai

  • P粉178132828

    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.

    répondre
    0
  • Annulerrépondre