专栏首页OECOMcss滚动进度条

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;
}

如此我们就完成了整个效果的实现,这个效果有一个缺点就是他顶部进度条右侧是斜的而不是垂直的,另外在兼容性方面兼容至IE10.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VUE父子组件之间的通信

    在写组件嵌套过程中,必然涉及到父子组件之间的通信问题,父组件向子组件传递很简单,可以通过props来实现。

    无邪Z
  • 微信小程序如何跳转公众号文章

    公众号跳小程序相信大家已经不陌生了,以前的时候小程序是无法跳转到公众号的,但是现在可以了,微信规定互相绑定的公众号和小程序之间可以实现自由跳转。下面我们来看一下...

    无邪Z
  • mysql嵌套子查询的应用

    sql语句中一个查询有时未必能满足需求,应对多表联查时就需要进行嵌套查询。嵌套查询的意思是,一个查询语句块可以嵌套在另外一个查询块的where子句中,称为嵌套查...

    无邪Z
  • Vue全局变量的实现方式

    程序员不务正业
  • “西瓜书”——第三章_线性模型(笔记)

    线性模型形式简单、易于建模,许多功能更为强大的非线性模型可在线性模型的基础上通过引入层级结构或高维映射而得。 ? ? ? ? ?

    YingJoy_
  • day2 oracle相关

    数据库定义有三: 1 一门计算机学科 2 代表某个软件 3 某一种数据库软件产生的集合 DDL 数据库定义语句 DML 数据库操作语句 创建一张表: ...

    98k
  • 手把手教你如何将学校饭卡复制到小米手环NFC版上

    NFC是Near Field Communication缩写,即近距离无线通讯技术。由飞利浦公司和索尼公司共同开发的NFC是一种非接触式识别和互联技术,可以在移...

    FB客服
  • lsof和tcpdump常用命令

    lsof用法 A.查看端口被谁占用 lsof -i:port,如:lsof -i:80 B.查看tcp监听端口 netstat -lpnt ...

    一见
  • python reverse()方法

    py3study
  • Google I/O大会发布了什么?

    我就是马云飞

扫码关注云+社区

领取腾讯云代金券