首页/ 填坑/ 文章详情

Web网页阅读进度条,纵享丝滑

Javascript Web 博客 特效 进度条 布局 发布于 2020-12-30

博客网站升级到3.0版本,感觉博客中规中矩,冥冥之中觉得缺了点什么。特效?花里胡哨的特效只会亮瞎狗眼,破坏整体布局,宁可保持页面的干净,绝不瞎折腾。

道理是这么说,然这事碰上前端,这事没完,真香!

添加新的特效,不是无水之原,无本之本,除了炫酷外,更多需要提升网页的「精气神」,深层次挖掘「内在美」。结合博客主要以文章为主,主打文章含金量,阅读文章是一个过程,于是制作个简单的阅读进度条。

HTML:

HTML<div class="header-progress"></div>

CSS 样式:

CSS.header-progress { position:fixed; top:0; left: 0; width: 0; height: 2px; background:rgba(240,72,72,0.65); transition: all 0.1s;}
让 div 阅读进度条层固定置顶,默认阅读进度条宽为 0,高2个像素。transition 是 css3 新的属性,主要使动画过渡更加流畅,不会太生硬。

getWebScrollProgress 函数:

JS/**
 * 获取页面滚动条进度
 * @method getWebScrollProgress
 */
var getWebScrollProgress = function () {
    var pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight; // 页面总高度
    var clientHeight = $(window).height() || document.documentElement.clientHeight; // 可见区域高度
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; //滚动的高度位置
    var progress = Math.round(((scrollTop) / (pageHeight - clientHeight)) * 100); // 计算百分比

    $('.header-progress').css('width',progress + '%');
}
阅读的进度条根据网页的滚动条占据页面总高度的百份比,滚动到底部即代表完成全部阅读,其间修改阅读进度条的宽,以示阅读到那里。

执行脚本:

JSgetWebScrollProgress(); //首次加载,渲染进度条
window.onscroll = function() { //监听滚动事件
    getWebScrollProgress();
}; 
监听滚动条事件,可以实时修改阅读的进度条进度。页面刷新情况下,滚动条不会回复到原位。首次加载不会触发 window.onscroll 事件,需要额外主动渲染。

※ 在获取页面总高度时,如果文章包含有图片,获取的高度值不准。图片尚未渲染,无法获取真实的高度,出现阅读的进度条不增,反减的情况。

文章评论0 records

最新 最早

0

最新评论Latest comments

唐牛才是食神唐牛才是食神 06-15 10:51
(*°▽°*)八(*°▽°*)♪,解决了
唐牛才是食神唐牛才是食神 06-15 10:49
发现不得了的东西,今晚回去好好研究下...
胖螺胖螺 02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!
强哥强哥 2021-12-08 15:49
怎么看文章作者是谁呀?
big2catbig2cat 2021-08-27 16:11
然而没什么用,smartpss不兼容老录像机,就算能看回放,很多时间点在回放里也看不到