阅读进度功能的实现
本文最后更新于 361 天前,其中的信息可能已经有所发展或是发生改变。
  • 使用 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 是浏览器显示区域的高度

图源: 慕课手记

获取上面几个属性值后,阅读进度就可以通过下面的公式计算出来

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%)

    就可以实现下面效果,一个蓝色的三角形:

    看到这种蓝色的三角形,你有没有感觉离阅读进度已经很近了?

    如果我们用一块白块遮住蓝块,只留一条缝在顶部,那当前显示出来蓝色块的底边不就是阅读进度吗?

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

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

  2. @supports

类似于 js 的功能检查,可以检查 CSS 中某一属性或功能当前浏览器是否支持。

? 实现原理

上面讲解 linear-height 时,我们提出了一种实现方案: 使用一块白块遮住蓝块,只留一条缝在顶部,显示的蓝条长度就是阅读进度

光说不难假把式,为了方便大家理解原理,我们使用一个案例来模拟一下,蓝块仍保持原来大小,使用一块 0.8 透明度的黑块盖在上面,黑块给蓝块在顶部空出 10px 空间。具体看下面演示

现在是不是感觉瞬间茅塞顿开

? CSS实现

  1. 首先使用 linear-gradient 实现蓝色背景块,并且要空出最后一屏
body{	
    background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
    
    
    background-size: 100% calc(100% - 100vh + 4px);
    background-repeat: no-repeat;
}

  1. 设置盖住蓝块的白块

阅读进度条的高度为 3px ,因此设置白块的高度为 100% - 3px,可以另外加一个 div 元素来设置白块,但小包推荐使用为元素 :before/:after ,伪元素不在文档流之中,方便渲染和控制

body:before{
    content:'';
    
    position: fixed;
    
    
    top: 3px;
    bottom: 0;
    width: 100%;
    
    z-index: -1;
    background: white;
}

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

? 源码仓库

传送门: 阅读进度功能

参考

  1. 这实现牛逼了,原来阮大佬博客的阅读进度功能这么简单:https://mp.weixin.qq.com/s/kZ7prDX_wy6hHI_C2wwIjA
标题:阅读进度功能的实现
地址:https://xiaodongxier.com/1177.html
作者:王永杰
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇