如何使用纯CSS实现滚动进度条效果

这篇文章将为大家详细讲解有关如何使用纯CSS实现滚动进度条效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联是一家从事企业网站建设、成都网站设计、网站建设、行业门户网站建设、网页设计制作的专业网络公司，拥有经验丰富的网站建设工程师和网页设计人员，具备各种规模与类型网站建设的实力，在网站建设领域树立了自己独特的设计风格。自公司成立以来曾独立设计制作的站点近1000家。

什么是css

css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。

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

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

分析需求

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

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

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

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

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

实现需求

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

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

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

关于“如何使用纯CSS实现滚动进度条效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

分享文章：如何使用纯CSS实现滚动进度条效果
新闻来源：http://shouzuofang.com/article/gcpooc.html