滚动指示器

Question

此代码使this滚动指示器。

能否请您帮我弄清楚这里如何计算变量scrolled？

请解释为什么从clientHeight中减去scrollHeight，然后将winScroll变量除以height然后再乘以100？

---

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {
  myFunction()
};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}

<div class="header">
  <h2>Scroll Indicator</h2>
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>
</div>

<div class="content">
  <h3>Scroll Down to See The Effect</h3>
  <p>100 text line</p>
</div>

Answer 1

clientHeight返回封闭的div的高度。 clientHeight reference

scrollHeight只读属性是元素内容高度的度量，其中包括由于溢出而无法在屏幕上显示的内容。 scrollHeight reference

元素的scrollTop值是从元素顶部到其最高可见内容的距离的度量。 scrollTop reference

减去clientHeight形式scrollHeight可提供最大的scrollTop值。当滚动到达页面底部时，scrollTop的值等于height的值。

用height除以100乘以得到滚动百分比。