专栏首页Coco的专栏不可思议的纯 CSS 滚动进度条效果

不可思议的纯 CSS 滚动进度条效果

结论先行,如何使用 CSS 实现下述滚动条效果?

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

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

OK,继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊。所以我一直在想,有没有可能只使用 CSS 完成这个效果呢?

分析需求

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

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

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

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

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

实现需求

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

假设我们的页面被包裹在 <body> 中,可以滚动的是整个 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 的高度。再看看效果,完美:

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

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

别人写过的东西通常我都不会再写,这个技巧很早以前就有看到,中午在业务中刚好用到这个技巧就写下了本文,没有去考证最先发明这个技巧的是谁。不知道已经有过类似的文章,所以各位也可以看看下面这篇:

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

最后

其实这只是非常牛逼的渐变非常小的一个技巧。更多你想都想不到的有趣的 CSS 你可以来这里瞧瞧:

CSS-Inspiration -- CSS灵感

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

好了,本文到此结束,希望对你有帮助 :)

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型

    Sb_Coco
  • 深入探讨 CSS 特性检测 @supports 与 Modernizr

    Sb_Coco
  • 谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!

    Sb_Coco
  • 腾讯中标深圳市政府知识产权执法辅助支撑服务项目

    近日,腾讯科技(深圳)成功中标深圳市市场监管局《知识产权执法辅助支撑服务项目》。根据深圳市政府采购中心发布的公告,腾讯安全将助力深圳市市场监督管理局,加快“区块...

    腾讯安全
  • Google发布ARCore 1.0,小米华为手机或率先尝鲜 | 热点

    镁客网
  • 23种设计模式之访问者模式

    定义: 封装一些作用于某种数据结构中的各元素的操作, 它可以在不改变数据结构的前提下定义作用于这些元素的新的操作

    烟草的香味
  • 看懂FTP的主动和被动模式

    老七Linux
  • 文件传输协议——FTP

    FTP是在两个计算机之间传输文件的协议。一般有两种情形,一种是需要登录的FTP文件服务器,另外一种FTP服务器是匿名的,它允许任何人进行访问。

    zy010101
  • 和这个国际节日来场约“惠”吧!

    _自2020年以来,接二连三的“黑天鹅” 让诸多国家陷入混乱 而我们的祖国 对多边事务的积极参与 和实施援助的同时 也让世界看到了 迈向产业升级的中国实力...

    腾讯云DNSPod团队
  • vscode配置:双击选中连字符

    用了比较久的vscode了,感觉vscode还是挺棒的,不过vscode默认的一些连字符是不能双击选中的,这导致我在写css类的时候,由于不能双击选中连字符,就...

    _kyle

扫码关注云+社区

领取腾讯云代金券