HTML笔记 ·

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.

参与评论