我想以百分比形式計算視窗內元素的滾動位置。
我很接近,但我知道我在思考數學中的一些錯誤。我製作了一個小演示來顯示多個元素的滾動百分比,但百分比都是錯誤的。
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
正如您所指出的,我認為您在這些行中的數學有問題:
const total = (window.scrollY) / (rect.bottom + rect.height); const pct = total * 100;
嘗試用以下命令更改這些行:
const scrollableDistance = window.innerHeight + rect.height; const scrolled = window.innerHeight - rect.top; const pct = (scrolled / scrollableDistance) * 100;
請告訴我這是否可以解決您的問題,以便我可以提出其他建議。