这实现牛逼了,原来阮大佬博客的阅读进度功能这么简单
前言
小包在学习阮一峰大佬的《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%
时,得到的效果图如下:
只截取部分图,并放大了浏览器,要不灰色部分会非常长
台子搭好了,下面就是通过 js
来动态计算 read_pro_inner
的 width
即可。
JS实现
如果我们利用 JavaScript
来实现阅读进度,我们要获取到文档的总高度、文档滚动距离、浏览器窗口的可视高度。
- 文档总高度:
document.documentElement.scrollHeight
- 窗口可视高度:
document.documentElment.cliengHeight
- 滚动距离:
document.documentElement.scrollTop || document.body.scrollTop
光看上面三个属性的名字有几分难以理解,来看一张示意图
从上图可以看到 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;
}
复制代码
通过上面简单的代码,就可以实现封面阅读进度效果了。
相关文章
- 【技术种草】cdn+轻量服务器+hugo=让博客“云原生”一下
- CLB运维&运营最佳实践 ---访问日志大洞察
- vnc方式登陆服务器
- 轻松学排序算法:眼睛直观感受几种常用排序算法
- 十二个经典的大数据项目
- 为什么使用 CDN 内容分发网络?
- 大数据——大数据默认端口号列表
- Weld 1.1.5.Final,JSR-299 的框架
- JavaFX 2012:彻底开源
- 提升as3程序性能的十大要点
- 通过凸面几何学进行独立于边际的在线多类学习
- 利用行动影响的规律性和部分已知的模型进行离线强化学习
- ModelLight:基于模型的交通信号控制的元强化学习
- 浅谈Visual Source Safe项目分支
- 基于先验知识的递归卡尔曼滤波的代理人联合状态和输入估计
- 结合网络结构和非线性恢复来提高声誉评估的性能
- 最佳实践丨云开发CloudBase多环境管理实践
- TimeVAE:用于生成多变量时间序列的变异自动编码器
- 具有线性阈值激活的神经网络:结构和算法
- 内网渗透之横向移动 -- 从域外向域内进行密码喷洒攻击