滚动指示器

Question

此代码使该滚动指示器。

您能帮我看看scrolled的变量是如何在这里计算的吗？

请解释为什么从scrollHeight减去clientHeight ，然后将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参考

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

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

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

用height除以100的乘积来获得滚动百分比。