效果？
页面的滚动进度而变化长短。
效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。
效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？
效果，感觉这个跟随滚动动画，仅靠 CSS 是不可能完成的，因为这里涉及了页面滚动距离的计算。
方法。
效果。分析一下难点：
页面滚动距离，改变宽度。如果页面滚动和进度条是一个整体呢？
功能。
页面被包裹在 中，可以滚动的是整个 body，给它添加这样一个从左下到到右上角的线性渐变：
Highlighter">
效果：
Highlighter">
效果达成了这样：
body 的线性渐变高度设置了整个 body 的大小，我们调整一下渐变的高度：
Highlighter">
calc 进行了运算，减去了 100vh，也就是减去一个屏幕的高度，这样渐变刚好在滑动到底部的时候与右上角贴合。
+ 5px 则是滚动进度条的高度，预留出 5px 的高度。再看看效果，完美：
文章，所以各位也可以看看下面这篇：
文章汇总在我的 ，持续更新，欢迎点个 star 订阅收藏。
文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
