Rumah  >  Soal Jawab  >  teks badan

Bagaimana untuk mengira peratusan kedudukan tatal elemen?

Saya ingin mengira kedudukan tatal elemen dalam tetingkap sebagai peratusan.

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>

P粉786800174P粉786800174216 hari yang lalu563

membalas semua(1)saya akan balas

  • P粉178132828

    P粉1781328282024-04-04 16:34:28

    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.

    balas
    0
  • Batalbalas