这实现牛逼了,原来阮大佬博客的阅读进度功能这么简单
共 4492字，需浏览 9分钟
·
2021-11-30 17:51
点击上方 前端瓶子君，关注公众号
回复算法，加入前端编程面试算法每日一题群
🎄 前言
小包在学习阮一峰大佬的《ES6入门教程》时，对文章顶部的阅读进度功能产生了浓厚的兴趣。小包当时猜想应该是使用 JavaScript 实现的，但最近爱上了浩如烟海的 CSS ，于是小包有个大胆的想法，单纯的 CSS 能实现阅读进度功能吗？
能，不止能，还非常巧妙！CSS⭐CSS⭐CSS 真的太强了。
虽然通过 CSS 可以实现阅读进度问题，但 JavaScript 作为老本行，一样得精通。
因此学习本文，你可以学会:
- 使用
JavaScript实现阅读进度功能 - 使用
CSS实现阅读进度功能
🔥 利用JavaScript实现阅读进度
📃 HTML与CSS
html css 部分非常简单，通过嵌套的两个 div 实现，外部的 div 提供底色背景，内部 div 显示阅读进度
<div class="read_pro">
<div class="read_pro_inner"></div>
</div>
复制代码
.read_pro {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #DDD;
}
.read_pro_inner {
content: '';
position: absolute;
left: 0;
height: 100%;
background-color: #0089f2;
}
复制代码
当我们设置 .read_pro_inner 的宽度为 20% 时，得到的效果图如下:
read_pro_js.png
只截取部分图，并放大了浏览器，要不灰色部分会非常长
台子搭好了，下面就是通过 js 来动态计算 read_pro_inner 的 width 即可。
🎬 JS实现
如果我们利用 JavaScript 来实现阅读进度，我们要获取到文档的总高度、文档滚动距离、浏览器窗口的可视高度。
- 文档总高度:
document.documentElement.scrollHeight - 窗口可视高度:
document.documentElment.cliengHeight - 滚动距离:
document.documentElement.scrollTop || document.body.scrollTop
光看上面三个属性的名字有几分难以理解，来看一张示意图
scroll.jpg
从上图可以看到 scrollTop 就是已经读过被卷起来的文档部分，scrollHeight 是文档的总长度，clientHeight 是浏览器显示区域的高度
图源: 慕课手记[2]
获取上面几个属性值后，阅读进度就可以通过下面的公式计算出来
readProInner.style.width = +(scrollTop / (scrollHeight- clientHeight)).toFixed(2)*100 + '%'
复制代码
大家可能会有疑惑，为什么分母是 scrollHeight- clientHeight 而不是 scrollHeight?
当滚动条滚动到底部时，浏览器此时仍显示一屏内容，此时滚动条无法再滚动，scrollTop 无法再增加，因此 scrollTop 的最大值是 scrollHeight- clientHeight ，如果使用 scrollHeight 做分母，阅读进度最终无法达到 100%。
document.addEventListener('scroll', function(e) {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
readProInner.style.width = +(scrollTop/(scrollHeight-clientHeight)).toFixed(2)*100 + '%'
})
复制代码
使用 js 实现需要监听 scroll 事件，而且滚动时有可能是频繁的 scroll 事件触发，有可能会造成一定的性能浪费，所以我们来一起学习 css 实现方案
🌟 使用CSS实现阅读进度
使用 CSS 实现阅读进度的方法很有意思，而且非常巧妙，不多说了，一起来看看。
📕预备知识
linear-gradient: 线性渐变，第一个参数为渐变方向，后面是颜色比例变化。比如设置
linear-gradient(to right top, #0089f2 50%, #DDD 50%)就可以实现下面效果，一个蓝色的三角形:
body-linear.png看到这种蓝色的三角形，你有没有感觉离阅读进度已经很近了？
如果我们用一块白块遮住蓝块，只留一条缝在顶部，那当前显示出来蓝色块的底边不就是阅读进度吗？
scrollPro.gif最后处理最后一屏的问题，保证滚动条滚动至底部时，阅读进度到达
100%
scrollBottom.png
这里如果没能理解原理，不用急，后面我会更详细的演示
@supports
类似于 js 的功能检查，可以检查 CSS 中某一属性或功能当前浏览器是否支持。
💡 实现原理
上面讲解 linear-height 时，我们提出了一种实现方案: 使用一块白块遮住蓝块，只留一条缝在顶部，显示的蓝条长度就是阅读进度
光说不难假把式，为了方便大家理解原理，我们使用一个案例来模拟一下，蓝块仍保持原来大小，使用一块 0.8 透明度的黑块盖在上面，黑块给蓝块在顶部空出 10px 空间。具体看下面演示
scrollShow.gif
现在是不是感觉瞬间茅塞顿开
💻 CSS实现
首先使用 `linear-gradient` 实现蓝色背景块，并且要空出最后一屏
body{
background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
/* 通过 calc 函数配合 100vh 就可以从总长中删除一屏的高度 */
/* 100vh 浏览器视口的高度 */
background-size: 100% calc(100% - 100vh + 4px);
background-repeat: no-repeat;
}
复制代码
- 设置盖住蓝块的白块
阅读进度条的高度为 3px ，因此设置白块的高度为 100% \- 3px，可以另外加一个 div 元素来设置白块，但小包推荐使用为元素 :before/:after ，伪元素不在文档流之中，方便渲染和控制
body:before{
content:'';
/* fixed定位 */
position: fixed;
/* 同时设置 top 和 bottom 可以拉伸 height */
/* 设置高度为 100% - 3px */
top: 3px;
bottom: 0;
width: 100%;
/* 降低层级，白块显示在文字之下 */
z-index: -1;
background: white;
}
复制代码
通过上面简单的代码，就可以实现封面阅读进度效果了，撒花~~~~
🛕 源码仓库
传送门: 阅读进度功能[3]
如果感觉有帮助的话，别忘了给小包点个 ⭐ 。
关于本文
https://juejin.cn/post/7033668584026931214
最后
欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！
回复「交流」，吹吹水、聊聊技术、吐吐槽！回复「阅读」，每日刷刷高质量好文！如果这篇文章对你有帮助，「在看」是最大的支持 》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持