纯手写优美滚动条|【秀技】
本帖最后由 不二如是 于 2020-3-17 19:00 编辑https://xxx.ilovefishc.com/forum/201901/21/105841pc1zoooo1kv88956.gif
今天实现的最终效果，如上图所示，不难但实现效果很精致。
顶部的滚动进度条，随着页面的滚动进度而长短变化。
在开始阅读之前，请鱼油缓一缓，思考下（欢迎下方留言）：
纯手动或者用 JS 如何实现？
嗯........
假设鱼油思考完毕。
是不是想到页面监听然后动态算比例？
或者计算页面滚动距离，然后画滚动条？
其实不用那么复杂啦，纯用 CSS 就好了。
意淫一下，等学了《零基础入门学习Web开发》（HTML5 & CSS3）这个系列你也会这么厉害。
目前，可以先尝鲜练练手。
如果想只用 CSS 实现，只能另辟蹊径，使用一些“障眼法”。
好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成这个效果。
分析一下难点：
如何得知用户当前滚动页面的距离并且通知顶部进度条？
正常分析应该是这样的，但是这就陷入了一个尴尬的处境。
进度条就只是进度条，接收页面滚动距离，改变宽度。
如果页面滚动和进度条是一个整体呢？
手把手环节
好了，不瞎得瑟了，运用线性渐变就可以。
关于线性渐变是什么，这里不做解释，自行参看：打造高质高的【按钮】
创建基本结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="鱼C工作室|免费编程视频教学|Python教学|Web开发教学|全栈开发教学|C语言教学|汇编教学|Win32开发|加密与解密|Linux教学">
<meta name="description" content="鱼C工作室为大家提供最有趣的编程视频教学。">
<meta name="author" content="鱼C工作室">
<title>鱼C-进度条</title>
</head>
<body>
<h1>鱼C-纯 CSS 进度条效果</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid, at consectetur dolorem ducimus error esse
ex expedita explicabo fuga fugit laborum maiores maxime nisi repudiandae sit ut! Ipsum, minus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo iusto minima minus porro repellendus! Ad
earum eligendi, enim et maxime nam quia quos sit temporibus! Dolores iusto optio provident.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda aut consequuntur delectus maxime minus
molestiae necessitatibus omnis optio quia quis, ut velit vero? Ab adipisci deserunt dolorum ut voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid, at consectetur dolorem ducimus error esse
ex expedita explicabo fuga fugit laborum maiores maxime nisi repudiandae sit ut! Ipsum, minus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo iusto minima minus porro repellendus! Ad
earum eligendi, enim et maxime nam quia quos sit temporibus! Dolores iusto optio provident.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda aut consequuntur delectus maxime minus
molestiae necessitatibus omnis optio quia quis, ut velit vero? Ab adipisci deserunt dolorum ut voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid, at consectetur dolorem ducimus error esse
ex expedita explicabo fuga fugit laborum maiores maxime nisi repudiandae sit ut! Ipsum, minus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo iusto minima minus porro repellendus! Ad
earum eligendi, enim et maxime nam quia quos sit temporibus! Dolores iusto optio provident.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda aut consequuntur delectus maxime minus
molestiae necessitatibus omnis optio quia quis, ut velit vero? Ab adipisci deserunt dolorum ut voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid, at consectetur dolorem ducimus error esse
ex expedita explicabo fuga fugit laborum maiores maxime nisi repudiandae sit ut! Ipsum, minus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo iusto minima minus porro repellendus! Ad
earum eligendi, enim et maxime nam quia quos sit temporibus! Dolores iusto optio provident.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda aut consequuntur delectus maxime minus
molestiae necessitatibus omnis optio quia quis, ut velit vero? Ab adipisci deserunt dolorum ut voluptatibus!</p>
<ul>
<li>1.FishC</li>
<li>2.零基础入门学习scratch</li>
<li>2.零基础入门学习python</li>
<li>2.零基础入门学习web</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab aliquam asperiores consectetur consequatur doloribus,
fugit inventore iste, libero minus, repudiandae saepe sint. Doloremque dolorum eius odio quos repellendus totam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam assumenda aut commodi, earum enim ex excepturi
explicabo incidunt ipsum neque quaerat quasi quis! Dignissimos earum nisi non quam temporibus vero?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto aut mollitia nemo. Dolore earum, ipsam
nemo neque nihil nobis omnis, quae quisquam quo repellendus rerum veniam voluptatem? Dolor, vero.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid, at consectetur dolorem ducimus error esse
ex expedita explicabo fuga fugit laborum maiores maxime nisi repudiandae sit ut! Ipsum, minus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo iusto minima minus porro repellendus! Ad
earum eligendi, enim et maxime nam quia quos sit temporibus! Dolores iusto optio provident.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda aut consequuntur delectus maxime minus
molestiae necessitatibus omnis optio quia quis, ut velit vero? Ab adipisci deserunt dolorum ut voluptatibus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid, at consectetur dolorem ducimus error esse
ex expedita explicabo fuga fugit laborum maiores maxime nisi repudiandae sit ut! Ipsum, minus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo iusto minima minus porro repellendus! Ad
earum eligendi, enim et maxime nam quia quos sit temporibus! Dolores iusto optio provident.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda aut consequuntur delectus maxime minus
molestiae necessitatibus omnis optio quia quis, ut velit vero? Ab adipisci deserunt dolorum ut voluptatibus!</p>
</body>
</html>
现在我们的基本页面结构就搞定了，全部包裹于 body 元素中。
当页面滚动，为 body 添加一个从左下到右上角的线性渐变：
<style>
body {
background-image: linear-gradient(to right top, #2ebb96 50%, #eee 50%);
background-repeat: no-repeat;
}
</style>
后面操作也都是 CSS 样式设置， 所以略去 style 元素不写了哈。
我们得到的效果：
不错哦，鱼C-元气绿（#2ebb96）的色块变化，其实很像一个整体变化的进度条了。
仔细观察最上面的效果，我们用另一个颜色把除了最上面的其他部分都遮盖起来，效果岂不就出来啦？！
怎么搞？
用伪类元素，把多出来的部分遮盖住。
还是不做详细介绍，自行参看：0 0 3 1 - 用伪类选择器让列表'嗑粉儿'
为 body 元素添加伪类：
body::after {
content: "";
position: fixed;
top: 6px;
left: 0;
bottom: 0;
right: 0;
background: red;
z-index: -1;
}
添加了一个距离上边界 6px 且置顶层的红色背景色：
上面的滚动条出来了吧？！
现在把背景色改为白色：
background: #fff;
效果就出来了：
眼尖的鱼油会发现，最后鼠标来回摆动的地方有一些小尴尬...
滑到底的时候，进度条并没有到底，怎么肥四呢？
是因为 body 的线性渐变高度设置了整个 body 的大小，需要控制背景图的大小。
CSS 中有一个 background-size 属性，这个属性可以帮助我们控制背景图大小，也就是渐变图的大小。
而对于 background-size 需要的是其 y 轴的值。
那问题又来了，y 轴的值怎么确定？
现在的视窗高度，就是 100vh，一个屏幕的高度。
background-size 的 y 可以通过：
100%-100vh
要得到100% - 100vh的值还需要使用 CSS 中的 calc()：
body {
background-image: linear-gradient(to right top, #2ebb96 50%, #eee 50%);
background-repeat: no-repeat;
background-size: 100% calc(100% - 100vh + 6px);
}
这里使用了 calc 进行了运算，减去了 100vh，也就是减去一个屏幕的高度。
这样渐变刚好在滑动到底部的时候与右上角贴合。
而 + 6px 则是滚动进度条的高度，预留出 6px 的高度。
再看看效果：
搞定，收工？！
源码下载：**** Hidden Message *****
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
如果喜欢，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_278:} ） 1 DF
页:
[1]