2022年02月01日发布使用纯CSS实现滚动进度条效果的几种

大家好，今日小科来聊聊一篇关于2022年02月01日整理发布：详解使用纯CSS实现滚动进度条效果的几种技巧的文章，现在让我们往下看看吧！

本文介绍了纯CSS滚动进度条的几种令人难以置信的效果。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

首先，如何用CSS实现下面的滚动条效果？

它是顶部的黄色滚动进度条，随着页面的滚动进度而改变长度。

在继续阅读之前，你可以花点时间。想想上面的效果或者用手试试。没有JS能熟练达到以上效果吗？

好，继续。这个效果是我在业务发展过程中遇到的一个类似的小问题。其实就算用Javascript，我的第一反应就是觉得很麻烦。所以我一直在想，有没有可能只用CSS就能达到这个效果？

乍一看，分析需要看到这个效果，我觉得单靠CSS是不可能跟随滚动动画的，因为它涉及到页面滚动距离的计算。

如果只想用CSS，只能另辟蹊径，用一些巧妙的方法。

好了，让我们用一些巧妙的技巧，用CSS一步步完成这个效果。分析困难：

我如何知道用户当前滚动页面的距离并通知顶部进度条？正常的分析应该是这样的，但却落入了传统思维。进度条只是一个进度条，它接收页面的滚动距离并改变宽度。如果页面滚动和进度条是一个整体呢？

需求的实现不再无关紧要。接下来，我们使用线性梯度来实现这个功能。

假设我们的页面包裹在正文中，整个正文都可以滚动，并添加了从左下角到右上角的线性渐变：

正文{

背景-image:线性-渐变(向右上方，#ffcc00 50%，# eee 50%)；

背景-重复：不重复；

}所以，我们可以得到这样一个效果：

哇，黄色块的颜色变化其实可以表达整体的进度。其实到这个时候，聪明的学生应该已经知道下一步该怎么做了。

我们使用虚拟元素来覆盖额外的部分：

body:after {

content :“”；

位置：固定；

top: 5px

left : 0；

bottom : 0；

right : 0；

背景# fff

z指数：-1；

}为了方便演示，我把上面的白色背景改成了黑色透明背景。

实际效果如下：

醒目的同学可能会发现，在这之后，当滑动到终点时，进度条并没有到达终点：

原因是身体的线性渐变高度设定了整个身体的大小。让我们调整渐变高度：

正文{

背景-image:线性-渐变(向右上方，#ffcc00 50%，# eee 50%)；

background-size : 100% calc(100%-100 VH 5px)；

背景-重复：不重复；

}这里用calc来计算，减去100vh，也就是减去一个屏幕的高度，这样滑动到底部的时候渐变刚好适合右上角。

而5px是滚动进度条的高度，剩下5px的高度。看效果，完美：

至此，这一要求完美实现，这是一个很好的技巧，也是一个完整的演示：

code demo-使用线性渐变实现滚动进度条。

别人写的我一般不写。我很久以前就看到了这个技能。中午刚把这个技能用在业务上，写了这篇文章。我没有试图找出是谁首先发明了这项技能。我不知道有没有类似的文章，所以你也可以看看下面的文章：

W3C -用纯CSS实现滚动指示器

其实说到底，这只是一个非常牛逼的渐变，一个非常小的技巧。更多你想不到的有趣CSS，可以来这里看看：

CSS-灵感- CSS灵感

好了，这篇文章结束了。希望对你有帮助。

原地址：https://segmentfault.com/a/1190000017830427

这篇好文章是转载于：知行礼动