Bagaimana untuk mengira peratusan kedudukan tatal elemen?

Question

Saya ingin mengira kedudukan tatal elemen dalam tetingkap sebagai peratusan.

• 0% ialah di mana bahagian atas elemen berada di bahagian bawah tetingkap (belum ditunjukkan lagi)
• 100% ialah kedudukan di mana bahagian bawah elemen berada di bahagian atas tetingkap (semua elemen dipaparkan)

Saya dekat, tetapi saya tahu saya berfikir sesuatu yang salah dalam matematik. Saya membuat demo kecil untuk menunjukkan peratusan tatal untuk berbilang elemen, tetapi peratusan semuanya salah.

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

Seperti yang anda nyatakan, saya rasa ada yang tidak kena dengan matematik anda dalam baris ini:

const total = (window.scrollY) / (rect.bottom + rect.height);
  const pct = total * 100;

Cuba tukar baris ini dengan:

const scrollableDistance = window.innerHeight + rect.height;
const scrolled = window.innerHeight - rect.top;

const pct = (scrolled / scrollableDistance) * 100;

Sila beritahu saya jika ini menyelesaikan masalah anda supaya saya boleh membuat cadangan lain.