纯CSS实现顶部滚动条效果

效果如图


image.png

分析需求

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

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

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

实现

我们运用线性渐变来实现这个功能
假设我们的页面被包裹在 <body>中,可以滚动的是整个body,给它添加这样一个从左下到到右上角的线性渐变

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;
}

这样之后,滑到底的时候,进度条并没有到底:


image.png

是因为 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 的高度。

最后给个原作者的效果网页:CodePen Demo -- 使用线性渐变实现滚动进度条

参考原文: 不可思议的纯 CSS 滚动进度条效果

推荐阅读更多精彩内容

  • 转载字掘金-chokcoco 问题先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面...
    兔子不打地鼠打代码阅读 192评论 0 1
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 390评论 0 1
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 3,314评论 0 4
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,824评论 1 86
  • 扶桑本是一种花,很艳丽妖娆,但又看起来平易近人,没有一丝娇气,在深圳,常常会看到绿叶中一朵两朵,开的从容淡定。 《...
    爱尔卡阅读 326评论 0 0