难以想象的纯 CSS 滚动进度条效果

时间 2019-11-05

标签难以想象 css 滚动进度效果栏目 CSS 繁體版

原文原文链接

问题先行，如何使用 CSS 实现下述滚动条效果？css

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

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

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

分析需求

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

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

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

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

正常分析应该是这样的，可是这就陷入了传统的思惟。进度条就只是进度条，接收页面滚动距离，改变宽度。若是页面滚动和进度条是一个总体呢？3d

实现需求

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

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

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}
复制代码

那么，咱们能够获得一个这样的效果：

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

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

body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}
复制代码

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

实际效果达成了这样：

眼尖的同窗可能会发现，这样以后，滑到底的时候，进度条并无到底：

究其缘由，是由于 body 的线性渐变高度设置了整个 body 的大小，咱们调整一下渐变的高度：

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
}
复制代码

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

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

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

CodePen Demo -- 使用线性渐变实现滚动进度条

别人写过的东西一般我都不会再写，这个技巧很早之前就有看到，中午在业务中恰好用到这个技巧就写下了本文，没有去考证最早发明这个技巧的是谁。不知道已经有过相似的文章，因此各位也能够看看下面这篇：

W3C -- 纯CSS实现Scroll Indicator(滚动指示器)

最后

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

CSS-Inspiration -- CSS灵感

更多精彩 CSS 技术文章汇总在个人 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

好了，本文到此结束，但愿对你有帮助 :)

若是还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。