滚动指示器

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 returns 封闭的高度 div。 clientHeight reference

scrollHeight 只读属性是对元素内容高度的度量，包括由于溢出而在屏幕上不可见的内容。 scrollHeight reference

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

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

div用height计算乘以100得到滚动百分比

滚动指示器

Scroll Indicator

javascript

scroll

calculation