Rumah > Soal Jawab > teks badan
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粉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.