第一个问题,如何用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,持续更新中,欢迎点个星订阅收藏。好了,本文到此结束,希望对大家有所帮助:)有什么问题或者建议可以多交流,原创文章,文笔有限,知识匮乏,如有不妥之处,敬请谅解!文章,请告诉我。