网页阅读进度功能实现

最新推荐文章于 2023-03-25 16:46:17 发布

维多利亚少年-

最新推荐文章于 2023-03-25 16:46:17 发布

阅读量1.1k

点赞数 1

分类专栏： js css 文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_45532305/article/details/122826899

版权

js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

通过js和css实现文章顶部的阅读进度功能

在这里插入图片描述

使用 JavaScript 实现阅读进度功能

1. html和css

html css 部分非常简单，通过嵌套的两个 div 实现，外部的 div 提供底色背景，内部 div 显示阅读进度

<head>
<style>
.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;
}
</style>
</head>
<body>
<div class="read_pro">
    <div class="read_pro_inner"></div>
</div>
<div>内容</div>
</body>

台子搭好了，下面就是通过 js 来动态计算 read_pro_inner 的 width 即可。

如果我们利用 JavaScript 来实现阅读进度，我们要获取到文档的总高度、文档滚动距离、浏览器窗口的可视高度。

文档总高度: document.documentElement.scrollHeight
窗口可视高度: document.documentElement.clientHeight
滚动距离: document.documentElement.scrollTop || document.body.scrollTop

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

readProInner.style.width = +(scrollTop / (scrollHeight- clientHeight)).toFixed(2)*100 + '%'

最后整体js部分

    const readProInner = document.querySelector('.read_pro_inner')
    const scrollHeight = document.documentElement.scrollHeight
    const clientHeight = document.documentElement.clientHeight
    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 实现阅读进度功能

只需设置body标签的样式即可
首先使用 linear-gradient 实现蓝色背景块，并且要空出最后一屏

body{ 
	margin: 0;
    background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
    /* 通过 calc 函数配合 100vh 就可以从总长中删除一屏的高度 */
    /* 100vh 浏览器视口的高度 */
    background-size: 100% calc(100% - 100vh + 4px);
    background-repeat: no-repeat;
}

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

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

维多利亚少年-

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
网页阅读进度功能实现

通过js和css实现文章顶部的阅读进度功能使用 JavaScript 实现阅读进度功能1. html和csshtml css 部分非常简单，通过嵌套的两个 div 实现，外部的 div 提供底色背景，内部 div 显示阅读进度<head><style>.read_pro { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background-colo
复制链接

扫一扫