不可思议的纯 CSS 滚动进度条效果

小咪咪 2022-01-30 11:19 318阅读 0赞

结论先行，如何使用 CSS 实现下述滚动条效果？

[![scrollbar][]][scrollbar 1]

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

在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。

OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？

[![image][]][image 1]

## 分析需求 ##

第一眼看到这个效果，感觉这个跟随滚动动画，仅靠 CSS 是不可能完成的，因为这里涉及了页面滚动距离的计算。

如果想只用 CSS 实现，只能另辟蹊径，使用一些讨巧的方法。

好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成这个效果。分析一下难点：

*  **如何得知用户当前滚动页面的距离并且通知顶部进度条？**

正常分析应该是这样的，但是这就陷入了传统的思维。进度条就只是进度条，接收页面滚动距离，改变宽度。如果页面滚动和进度条是一个整体呢？

## 实现需求 ##

不卖关子了，下面我们运用线性渐变来实现这个功能。

假设我们的页面被包裹在 `<body>` 中，可以滚动的是整个 body，给它添加这样一个从左下到到右上角的线性渐变：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> body { &nbsp;&nbsp;&nbsp;&nbsp;background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%); &nbsp;&nbsp;&nbsp;&nbsp;background-repeat: no-repeat; } </td> 
 </tr> 
 </tbody> 
</table>

那么，我们可以得到一个这样的效果：

[![scrollbar2][]][scrollbar2 1]

Wow，黄色块的颜色变化其实已经很能表达整体的进度了。其实到这里，聪明的同学应该已经知道下面该怎么做了。

我们运用一个伪元素，把多出来的部分遮住：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> body::after { &nbsp;&nbsp;&nbsp;&nbsp;content: ""; &nbsp;&nbsp;&nbsp;&nbsp;position: fixed; &nbsp;&nbsp;&nbsp;&nbsp;top: 5px; &nbsp;&nbsp;&nbsp;&nbsp;left: 0; &nbsp;&nbsp;&nbsp;&nbsp;bottom: 0; &nbsp;&nbsp;&nbsp;&nbsp;right: 0; &nbsp;&nbsp;&nbsp;&nbsp;background: #fff; &nbsp;&nbsp;&nbsp;&nbsp;z-index: -1; } </td> 
 </tr> 
 </tbody> 
</table>

为了方便演示，我把上面白色底改成了黑色透明底，：

[![scrollbar3][]][scrollbar3 1]

实际效果达成了这样：

[![scrollbar4][]][scrollbar4 1]

眼尖的同学可能会发现，这样之后，滑到底的时候，进度条并没有到底：

[![image][image 2]][image_image 2]

究其原因，是因为 `body` 的线性渐变高度设置了整个 body 的大小，我们调整一下渐变的高度：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> body { &nbsp;&nbsp;&nbsp;&nbsp;background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%); &nbsp;&nbsp;&nbsp;&nbsp;background-size: 100% calc(100% - 100vh + 5px); &nbsp;&nbsp;&nbsp;&nbsp;background-repeat: no-repeat; } </td> 
 </tr> 
 </tbody> 
</table>

这里使用了 `calc` 进行了运算，减去了 `100vh`，也就是减去一个屏幕的高度，这样渐变刚好在滑动到底部的时候与右上角贴合。

而 `+ 5px` 则是滚动进度条的高度，预留出 `5px` 的高度。再看看效果，完美：

[![scrollbar][scrollbar 1]][scrollbar 1]

至此，这个需求就完美实现拉，算是一个不错的小技巧，完整的 Demo：

[CodePen Demo — 使用线性渐变实现滚动进度条][CodePen Demo _]

[![image][image 3]][image 3]

别人写过的东西通常我都不会再写，这个技巧很早以前就有看到，中午在业务中刚好用到这个技巧就写下了本文，没有去考证最先发明这个技巧的是谁。不知道已经有过类似的文章，所以各位也可以看看下面这篇：

[W3C — 纯CSS实现Scroll Indicator(滚动指示器)][W3C _ _CSS_Scroll Indicator]

## 最后 ##

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

[scrollbar]: https://www.itcodemonkey.com/data/upload/portal/20190115/1547521332585475.gif
[scrollbar 1]: https://www.itcodemonkey.com/data/upload/portal/20190115/1547521334930608.gif
[image]: https://www.itcodemonkey.com/data/upload/portal/20190115/1547521333266542.png
[image 1]: https://user-images.githubusercontent.com/8554143/50879649-a1544000-1416-11e9-826f-15bbde1346ee.png
[scrollbar2]: https://www.itcodemonkey.com/data/upload/portal/20190115/1547521333717903.gif
[scrollbar2 1]: https://user-images.githubusercontent.com/8554143/50879862-643c7d80-1417-11e9-8600-4133b0751626.gif
[scrollbar3]: https://www.itcodemonkey.com/data/upload/portal/20190115/1547521333786726.gif
[scrollbar3 1]: https://user-images.githubusercontent.com/8554143/50880203-871b6180-1418-11e9-8588-f0be26721fbe.gif
[scrollbar4]: https://www.itcodemonkey.com/data/upload/portal/20190115/1547521334656060.gif
[scrollbar4 1]: https://user-images.githubusercontent.com/8554143/50880270-d6619200-1418-11e9-97c7-601f7aca01e7.gif
[image 2]: https://www.itcodemonkey.com/data/upload/portal/20190115/1547521334678387.png
[image_image 2]: /images/20220130/35958844e3a047be8a5225e796e7826d.png
[CodePen Demo _]: https://codepen.io/Chokcoco/pen/KbBXQM?editors=1100
[image 3]: https://www.itcodemonkey.com/data/upload/portal/20190115/1547521381620028.png
[W3C _ _CSS_Scroll Indicator]: https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html