纯手写优美滚动条|【秀技】

不二如是 · 发表于 2019-1-11 17:50:21

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2020-3-17 19:00 编辑

登录/注册后可看大图

今天实现的最终效果，如上图所示，不难但实现效果很精致。

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

在开始阅读之前，请鱼油缓一缓，思考下（欢迎下方留言）：

纯手动或者用 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 的高度。

再看看效果：

搞定，收工？！

源码下载：

游客，如果您要查看本帖隐藏内容请回复

登录/注册后可看大图

如果喜欢，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列HTML帖子，请订阅专辑☞（传送门）（不喜欢更要订阅

）

longren_fu · 发表于 2019-1-22 22:30:48

鱼豆腐爱吃猫 · 发表于 2019-12-16 13:56:27

账号		自动登录	找回密码
密码			立即注册

[奇技淫巧] 纯手写优美滚动条|【秀技】

马上注册，结交更多好友，享用更多功能^_^

评分