专栏首页Vue中文社区这实现牛逼了,原来阮大佬博客的阅读进度功能这么简单

这实现牛逼了,原来阮大佬博客的阅读进度功能这么简单

前言

小包在学习阮一峰大佬的《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_innerwidth 即可。

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 实现阅读进度的方法很有意思,而且非常巧妙,不多说了,一起来看看。

预备知识

  1. linear-gradient: 线性渐变,第一个参数为渐变方向,后面是颜色比例变化。 比如设置 linear-gradient(to right top, #0089f2 50%, #DDD 50%) 就可以实现下面效果,一个蓝色的三角形:

body-linear.png看到这种蓝色的三角形,你有没有感觉离阅读进度已经很近了? 如果我们用一块白块遮住蓝块,只留一条缝在顶部,那当前显示出来蓝色块的底边不就是阅读进度吗?

scrollPro.gif最后处理最后一屏的问题,保证滚动条滚动至底部时,阅读进度到达 100%

scrollBottom.png这里如果没能理解原理,不用急,后面我会更详细的演示

  1. @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;
}

复制代码
  1. 设置盖住蓝块的白块

阅读进度条的高度为 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;
}
复制代码

通过上面简单的代码,就可以实现封面阅读进度效果了。

文章分享自微信公众号:
Vue中文社区

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

原始发表时间:2021-12-03
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 谈:写烂代码才是面向人民币编程的精髓

    俗话说得好:代码撸得好,搬砖搬到老。如果你不是程序员里的top 5%精英,高质量的代码与升职加薪,迎娶白富美的相关系数几乎为0,除了给你带来一种虚幻的优越感与满...

    前端江太公
  • 突发!Python 登顶了。。。

    点击关注公众号,Java干货及时送达 Python 登顶! 栈长在上一篇《卧槽!最新编程语言排名,Java 沦为老三。。》文章中预测 Python 很快就要新...

    Java技术栈
  • 掌机小霸王,开源俄罗斯方块小游戏

    俄罗斯方块属于超级经典的游戏, 感兴趣可以玩一下, 找回一点童年, 当然如果你对这类网页轻量小游戏很感兴趣, 可以查看我以前写过的, 《超级马里奥游戏》Chro...

    zhaoolee
  • Guide哥从毕业到入职半年的感受!工作之后我学到了什么?

    如果大家看过我之前的介绍的话,就会知道我是 19 年毕业的几百万应届毕业生中的一员。这篇文章主要讲了一下我入职大半年的感受,文中有很多自己的主观感受,如果你们有...

    Guide哥
  • VUE CONF大会之后的感想(非技术)

    应该不止一次参加这样全国规模的前端会议了,从六年前踏入前端到今天依然在带一个前端小组在夜以继日的写业务代码。在会议中会因为切实的大佬对技术的独到观点而兴奋而替他...

    RobinsonZhang
  • tmux | 加固shell

    直到看了Micro8大佬写的教程,我才发现,原来tmux 还可以实现后台不间断运行程序,我跟你说这个功能老牛了!

    意大利的猫
  • 如何拒绝成为一名优秀的程序员?

    “一名优秀的程序员身上优秀的特质太多,我不知道如何成为,但我知道如何不成为,想不想听?”老鸟问道。

    ChildhoodAndy
  • 迟来的2020年度总结,顺带附上被鸽了很久的自我介绍

    大家好,我是小澎,一个热爱前端的2021届的应届毕业生,大学专业是安全工程,不,不是网络安全,而是工程安全,所以我是非科班。今天呢,想跟大家介绍介绍我自己

    @零一
  • 个人搜索技巧小记

    去搜错误码(可以看看日志文件里有没有),不搜不知道,一搜真香,网上大概率会有对应问题的解决教程

    suwanbin
  • 牛逼的Transform Plus | Transform进阶教程

    之前写过一篇文章介绍了下关于Transform增量如何编写。这次我想展开说些别的。

    逮虾户
  • Github是目前唯一的还有流量红利的写作平台

    我承认,综合来看,公众号是目前为止最好的写作平台,但是它的红利期早就已经过去了。也就是说,如果你现在开始在公众号上写作,这个过程,会比两三年前,艰辛数倍。

    纯洁的微笑
  • 匹马行天下——没有无缘无故的爱和恨,没有无缘无故的编程

    想这世间,没有无缘无故的爱,也没有无缘无故的恨,一切都有有原因的,我想编程亦是如此,技术时常更新,程序员时常学习,随着时间的推移,程序员发际线的增高,生活无处不...

    泰斗贤若如
  • 潜心一技、做到极致!——Elastic认证工程师之路

    2020年2月3日我参加Elastic认证工程师考试,2020年2月5日中午得到认证结果:通过考试。

    铭毅天下
  • 【学习】从入门到精通,我是这样学习算法的

    这篇文章讲了什么? 我这些年学习数据结构和算法的总结。 一些不错的算法书籍和教程。 算法的重要性。 初学 第一次接触数据结构是在大二下学期的数据...

    小莹莹
  • 【云+社区年度征文】年末了,是该总结一波了,冲鸭2021

    UP自己正经开始写博客也是今年7月份开始写的,也是边学习边记录.时间跨度也是也是一直从今年7月份一直持续到现在.下面是UP自己这半年的学习轨迹.相关的文章也已经...

    萌萌哒的瓤瓤
  • 简单的一道 SQL 题,谈如何提高编程水平

    前两天发了一篇《SQL的3列4种对比方法》,近500 阅读。一个月没更文了,没想到朋友们都还关注着,我很激动,非常感谢。

    Lenis
  • 一位 Google 程序员的算法学习之路

    来源 | zh.lucida.me/blog/on-learning-algorithms/

    五分钟学算法
  • 一年半前端人总结的大厂高频面经(附学习资源)

    作者:俊劫 https://juejin.cn/post/6942988170208215076

    用户4456933

扫码关注腾讯云开发者

领取腾讯云代金券