如何制作纯CSS滚动进度条效果

terry 2年前 (2023-09-27) 阅读数 68 #数据结构与算法

如何使用CSS实现如下滚动条效果？

是顶部的黄色进度条，随着页面滚动，进度条的长度会发生变化。

您可以花点时间继续阅读下面的内容。试想一下上面的效果或者自己尝试一下，看看是否可以在不使用JS的情况下巧妙地实现上面的效果。

好，继续。这个效果是我在业务开发过程中遇到的类似的小问题。事实上，尽管我使用的是Javascript，但我的第一反应是感觉很尴尬。所以我一直想知道是否可以只用CSS来实现这种效果？

分析需求

当我第一次看到这个效果的时候，我觉得后面的这个滚动动画光靠CSS是不可能完成的，因为它涉及到计算页面滚动距离。

如果你只想使用CSS，你可以另辟蹊径，使用一些巧妙的方法。

好啦，让我们通过一些技巧，一步步用CSS来实现这个效果。分析难度：

如何知道用户在页面滚动的距离并通知顶部进度条？

正常分析应该是这样，但这属于传统思维。进度条只是一个进度条，它接收侧滚动距离并改变其宽度。如果侧滚动条和进度条是一个整体怎么办？

达到要求

这已经不再是事实了。我们用线性渐变来实现这个功能。

假设我们的页面被包裹。能卷的就是全身。给它添加一个从左下角到右上角的线性渐变：

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

然后我们就可以得到这样的效果：

哇，黄色块的颜色变化其实可以表达整体的进度。其实聪明的学生现在应该已经知道下一步该做什么了。

我们用伪元素来遮盖多余的部分：

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

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

实际效果如下：

眼尖的同学可以发现，这样做后，当滑到底部时，进度线没有到达底部：

原因是因为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 的高度。再看看效果，完美：

至此这个需求已经完美实现了，真是一个不错的小技巧。完整演示：

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

其他人发帖说我通常不写这样的事情。我很久以前就见过这个技术了。中午我在生意中碰巧用到了这个技术，没有去研究是谁第一个发明了这个技术，就写了这篇文章。不知道有没有类似的文章，大家也可以看一下下面的文章：

W3C -- 滚动指示器的纯 CSS 实现