作为一个前端工程师，在培植自己的网站的时候，肯定有一个冲动，便是把各个模块按照自己的意愿进行的DIY设计。比如，在浏览器滚动的时候，为页面设计一个俊秀的滚动进度条。根据滚动的间隔，来动态地展示已经滚动的进度。
一、实现效果本日禀享一个很只须要几行代码就能搞定的彩虹滚动进度条。大致的样子如下图所示。
二、实现事理
实在这个功能说来也非常大略，核心便是将页面监听滚动间隔与能够滚动的间隔的百分比赋值给进度条的width属性。
将progress的dom固定定位到top:0的位置，宽度设置为0%，由于要做彩虹的颜色，就设置了7个dom设置不同的颜色，把它们的一眼的高度属性提出来，设置了一个统一的css变量。
<div id="progress-bar"> <div id="red"></div> <div id="orange"></div> <div id="yellow"></div> <div id="green"></div> <div id="blue"></div> <div id="indigo"></div> <div id="purple"></div></div>
:root { --progress-bar-height: 10px;}#progress-bar { width: 0%; position: fixed; top: 0; left: 0;}#red { background-color: #FF0000; height: var(--progress-bar-height);}// 其他颜色...（2）JavaScript 部分
在开始之前先遍及一个知识点，那便是scrollHeight、clientHeight和scrollTop这三个属性各代表什么。
document.body.clientHeight便是网页可见区域document.body.scrollHeight便是网页的总高度document.body.scrollTop便是已经滚动的间隔而我们要做的便是，先找到全体页面能够滚动的间隔，那便是上面的第二项数值减去第一项的数值。
const needScroll = document.body.scrollHeight - document.documentElement.clientHeight;
之后监听滚动scroll事宜，来获取当前滚动的间隔。document.body.scrollTop便是滚动条向下滚动的间隔，也可以说是元素顶部被遮住部分的高度。
window.addEventListener('scroll', () => { const haveScrolled = document.body.scrollTop || document.documentElement.scrollTop;})
末了通过求出滚动的百分比，赋值给progress的width属性即可。
progressBar.style.width = haveScrolled / needScroll 100 + '%';
这样就能得到效果了，这里只简述事理，更多的效果、适配就不再多说。实在，我们不仅仅能做成一个横向的进度条，我们也可以将他做成一个圆环，或者像安卓手机充电时的效果等等，这些就靠我们自己发挥奇思妙想了。
