首先，如何使用CSS来实现下面的滚动条效果？
蓝色进度条会随着页面的长度而变化。
在继续阅读以下内容之前，您可以先花点时间。试着想想以上的效果，或者尝试一下。在没有JS的帮助下，你能熟练地达到上述效果吗。
OK，继续。这种影响是我在业务开发过程中遇到的一个类似的小问题。事实上，即使我使用JavaScript，我的第一反应就是觉得很麻烦。所以我一直在想，有没有可能只用CSS来达到这个效果？
第一眼看到这种效果，我觉得这个跟随滚动的动画不能单靠CSS来完成，因为它涉及到页面滚动距离的计算。
如果你只想使用CSS，你只能找到另一种方法，并使用一些聪明的方法。
好的，让我们借助一些技巧一步一步地使用CSS来完成这个效果。分析困难：
- 如何知道用户当前滚动页面的距离并通知顶部进度条？
正常的分析应该是这样的，但它属于传统思维。进度条只是一个进度条。它接收页面滚动距离并更改宽度。如果页面滚动和进度条是一个整体呢？
实施要求不要出卖。让我们使用它线性梯度实现这一功能。
假设我们的页面是用&书信电报；body；在中，您可以滚动整个body，并从左下角到右上角添加这样一个线性渐变：
body{
background图片：线性渐变（至右上方，#ffcc0050%，#eee50%）；
background重复：不重复；
}
复制代码
然后，我们可以得到这样的效果：
哇，黄色方块的颜色变化实际上可以表达整体进度。事实上，聪明的同学们应该已经知道在这里该做什么了。
我们使用伪元素来覆盖额外的部分：
body：之后呢{
content：""；；
position：固定；
顶部：5px；
left：0；
底部：0；
右：0；
background：#fff；
z指数：-1；
}
复制代码
为了便于演示，我将白色底部改为黑色透明底部：
实际效果如下：
目光敏锐的学生可能会发现，当他们滑到底部时，进度条不会到达终点：
原因是body直线梯度高度决定了整个body的大小。让我们调整渐变高度：
body{
background（AndyLau）——图片：线性渐变（至右上方，#ffcc0050%，#eee50%）；
background-尺寸：100%calc（100%-100vh+5px）；
background重复：不重复；
}
复制代码
这里用小马计算并减去100vh，也就是说，减去一个屏幕的高度，这样当滑动到底部时，渐变正好适合右上角。
和+5px是滚动进度条的高度，它是保留的5px树的高度。看看效果，完美：
到目前为止，这一要求已经完全实现。这是一项很好的小技巧。完整的演示：
CodePen演示——使用线性梯度滚动进度条
我通常不会写别人写的东西。这项技能还很早
我以前看到过，我只是在中午的时候在我的生意中使用了这项技能，并在没有验证谁首先发明了这项技能的情况下写了这篇文章。
最新评论