第一个问题，如何用CSS实现下面的滚动效果？就是最上方的黄色滚动进度条，随着页面的滚动，长度会发生变化。在继续阅读以下内容之前，您可以花点时间。试想一下上面的效果或者自己试试看，在没有JS的情况下是否可以巧妙的实现上面的效果。好的，继续。这个效果是我在业务开发过程中遇到的一个类似的小问题。其实就算用Javascript，我第一反应也是觉得很麻烦。所以我一直在想，是不是只用CSS就可以实现这种效果呢？分析需求乍一看这个效果，感觉滚动动画单靠CSS是不行的，因为涉及到页面滚动距离的计算。如果只想使用CSS，只能另辟蹊径，使用一些巧妙的方法。好吧，让我们使用CSS借助一些技巧来逐步完成这个效果。分析难点：如何知道用户当前滚动页面的距离并通知顶部进度条？正常的分析应该是这样的，但是这就落入了传统思维。进度条只是一个进度条，它接收页面的滚动距离，改变宽度。如果页面滚动和进度条是一个整体呢？这不是实现需求的问题。下面我们使用线性渐变来实现这个功能。假设我们的页面被包裹在
中，整个body可以滚动，并且给它添加一个从左下角到右上角的线性渐变：body{background-image:linear-gradient(torighttop,#ffcc0050%,#eee50%);background-repeat:no-repeat;}然后，我们可以得到这样一个效果：哇，黄色块的颜色变化其实可以表达整体的进度。其实，此时，聪明的同学应该已经知道下一步该怎么做了。我们使用一个伪元素来覆盖额外的部分：body::after{content:"";位置：固定；顶部：5px；左：0；底部：0；右：0；背景：#fff；z-index:-1;}为了方便演示，我把上面的白色底部换成了黑色透明底部：实际效果是这样的：眼尖的同学可能会发现，这样之后，滑动到底部的时候，进度条没有结束：原因是body的线性渐变高度设置了整个body的大小，我们调整一下渐变的高度：body{background-image:linear-gradient(torighttop,#ffcc0050%,#eee50%);背景尺寸：100%计算（100%-100vh+5px）；background-repeat:no-repeat;}这里使用calc进行计算，减去100vh，也就是减去一个屏幕的高度，这样渐变滑动到底部的时候就吸附到右上角。而+5px是滚动进度条的高度，高度留5px。再看效果，完美：至此，这个需求已经完美实现。这是一个很好的小技巧。完整demo：CodePenDemo——使用线性渐变实现滚动进度条。我通常不写别人写过的东西，这种技术很久以前就见过了。中午正好在业务中使用了这个技术，写了这篇文章。我没有去验证这个技术是谁最先发明的。不知道有没有类似的文章，大家也可以看看下面这篇文章：W3C--PureCSStoimplementScrollIndicator（滚动指示器）归根结底，这只是一个非常小的渐变的trick.更多你想不到的有趣CSS，可以来这里看看：CSS-Inspiration--CSSInspiration更多精彩CSS技术文章汇总在我的Github--iCSS，持续更新中，欢迎点个星订阅收藏。好了，本文到此结束，希望对大家有所帮助：）有什么问题或者建议可以多交流，原创文章，文笔有限，知识匮乏，如有不妥之处，敬请谅解！文章，请告诉我。