css滚动进度条
需求
首先先描述一下需求，就是在顶部有一个进度条，随竖向滚动条的滚动而长短变化，用以显示文章阅读进度，实现的方式是采用css来实现。
既然是使用css来实现，那么我们应该思考一下如何使用css，貌似css没有这种功能吧。但是我们可以变个思路来实现，下面来说一下具体的实现方式。
实现
在css中有一个属性叫做Linear Gradients，这是一个线性变化的样式属性，他可以让一个颜色渐变为另一个颜色。具体语法为
background: linear-gradient(direction, color-stop1, color-stop2, ...);在实际应用中我们先来构建一个基本的html结构
<div id="grad1">
<div>
<p>从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。从顶部开始的线性渐变。
</p>
</div>
</div>样式如下设置
#grad1 {
height: 200px;
overflow:hidden;
position:relative;
}
#grad1 p{
margin:0;
position:relative;
}
#grad1>div{
height: 200px;
overflow:auto;
position:relative;
}
#grad1 p::after{
background: linear-gradient(to right top, #007fff 50%, #eee 50%);
content: "";
background-repeat: no-repeat;
margin: 0;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}如此我们实现了下面的效果
我们看一下顶部的效果，通过滚动我们发现顶部覆盖的区域越来越大，如果下面盖住，只留下上面一点不就实现效果了吗，对此，只需要对上述代码做一个小小的修改即可
#grad1 p::after{
background: linear-gradient(to right top, #007fff 50%, #eee 50%);
content: "";
background-repeat: no-repeat;
margin: 0;
position: absolute;
width: 100%;
height: calc(100% - 196px);
left: 0;
top: 0;
z-index: -1;
}
#grad1::after {
content: "";
position: absolute;
top: 5px;
left: 0;
bottom: 0;
right: 0;
background: #fff;
z-index: -1;
}
css滚动进度条
如此我们就完成了整个效果的实现，这个效果有一个缺点就是他顶部进度条右侧是斜的而不是垂直的，另外在兼容性方面兼容至IE10.
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-01-17，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录