更好的纯CSS滚动指示器技术实现 « 张鑫旭-鑫空间-鑫生活

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8701
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

滚动指示器封面图

一、CSS滚动指示器

滚动指示器指的是页面的顶端会有一个进度条，指示滚动的进度。效果如下GIF所示（点击播放）：

滚动计数器示意效果

CSS滚动指示器指的是不借助JavaScript，纯CSS实现滚动进度效果。

二、传统的实现方法

传统CSS实现方法由一个名叫 Mike的人首先提出，时间应该是16年，这个CodePen目前已经有十几万的访问量：CSS only scroll indicator

传统的CSS实现非常有创意，具体原理如下。

在body标签上写一个对角的线性渐变，然后用一个白色的固定定位的浮层覆盖在上面，CSS代码示意如下：

body{    
    background: linear-gradient(to right top, teal 50%, white 50%);
    background-size: 100% calc(100% - 100vh);
    background-repeat: no-repeat;
}

body::before{
    content:'';
    position: fixed;
    top: 5px;
    bottom: 0;
    width: 100%;
    z-index: -1;
    background: white;
}

::before伪元素模拟的就是白色的覆盖层，不过这个覆盖层并不是完全覆盖，上边缘露出了一点点的距离，这个距离可以透出body渐变背景，随着滚动进行，会出现类似进度条一样的效果。如果我们把白色覆盖层的透明度降低，大家就可以看懂实现的原理了，如下GIF录屏效果（点击播放，1M大小）：

传统指示器原理示意图

三、传统实现方法的致命缺陷

传统的css滚动指示器效果虽然方法和思路非常精妙，但是却有致命的缺陷，导致几乎无法在实际项目中应用。

致命缺陷是：

页面内容不能有背景色或背景图！
body自身也不能有背景图！

由于存在上面这两点性质，实际开发场景变幻莫测，页面内容有个背景色背景图什么的太正常不过了，居然会影响CSS滚动指示器的效果，显然这个技术没有实用性，就是个开阔眼界的玩具而已。

好在技术在发展，时代在召唤，我自己花时间琢磨了一下，有没有什么方法可以化腐朽为神奇，避开上面这些不足，让CSS滚动只是器能够在实际项目中大放光彩。嘿，还真让我想到了，一番实践下来确实可行，这里给大家分享下。

四、我想到的更好的实现

我想到的这个技术实现区别就在于对角线性渐变不是写在body标签上的，而是一个普通的div元素上。

具体操作如下：

在<body>标签内插入指示器元素：
```
<div class="indicator"></div>
```

粘贴如下所示的CSS代码：

body {
    position: relative;
}
.indicator {
    position: absolute;
    top: 0; right: 0; left: 0; bottom: 0;
    background: linear-gradient(to right top, teal 50%, transparent 50%) no-repeat;
    background-size: 100% calc(100% - 100vh);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: darken;
}
.indicator::after {
    content: '';
    position: fixed;
    top: 5px; bottom: 0; right: 0; left: 0;
    background: #fff;
    z-index: 1;
}

一个更好的CSS滚动指示器效果就实现了，眼见为实，您可以狠狠地点击这里：更好的纯CSS滚动指示器demo

GIF录屏效果如下（观察最上边缘）：

我的更好的CSS滚动指示器

原理说明

传统CSS滚动指示器为了防止对角渐变（也就是滚动进度条）的覆盖页面上的元素内容，因此写在了最底层的body元素上，这就导致如果body元素内的普通元素内容有背景色，或者背景图之类的，就会覆盖进度条，产生致命缺陷。

我的优化方法是把对角渐变（也就是滚动进度条）连同里面的白色覆盖层写在了普通元素的上面，这样避开被覆盖的致命缺陷。但是这样实现带来另外一个问题，页面的内容都被白色图层覆盖了，那页面内容岂不是都看不见了？不要担心，有CSS声明可以让白色的图层变成透明，那就是mix-blend-mode:darken，也就是darken混合模式。darken混合模式的混合方式很好理解，两个颜色进行混合，哪个颜色深就使用哪个颜色？

要知道所有的颜色里面最浅的就是白色，于是我们只要把我们的白色覆盖层的混合模式设置为darken，那必然最终呈现出来的颜色一定是覆盖层下面元素内容的颜色，换句话说我们的白色透明覆盖层变透明了。

原理示意图

五、其他说明和结语

CSS滚动指示器要想效果良好，需要注意两点：

进度条的颜色尽量取深色，因为本身包含darken混合模式，如果颜色过浅，很容易被底部的内容颜色给混合。
CSS滚动指示器需要在页面滚动高度超过一屏的时候才出现。原因有两方面：一是如果滚动高度过小，没有必要使用滚动指示器；二是滚动指示器本质上是一个渐变，如果滚动高度不足，则进度条的边缘会过于倾斜而导致显示效果不完美。

本文内容实际上应该2个月前就开始排期了（第五届CSS大会分享内容），一直到今天才排到更新，事情太多了，想做的事情堆积如山，周更的小说已经一个月没写了，要写的公众号文章也有好几个，还不知道排到什么时候。今日两更，还有5篇文章争取端午完成，不过估计写完3篇不错，因为端午还给自己安排了个支付开发需求，还有2篇只能下周了，那小说怎么办呢？还有公众号文章？天哪！下下周还要去北京做分享，好在一分付出还有半分的收获的。

加油加油！

本文为原创文章，欢迎分享，勿全文转载，如果内容你实在喜欢，可以加入收藏夹，永不过期，而且还会及时更新知识点以及修正错误，阅读体验也更好。
本文地址：https://www.zhangxinxu.com/wordpress/?p=8701

（本篇完）

FDCon2019大会分享之滤镜与混合模式实录 (0.550)
HTML中无标签文本的CSS变色技巧 (0.247)
CSS var变量的局部作用域（继承）特性 (0.158)
对html与body的一些研究与理解 (0.153)
CSS 相对/绝对(relative/absolute)定位系列（二） (0.153)
寥寥数行SVG实现圆环loading或倒计时效果 (0.153)
小tips: 点击页面出现富强、民主这类文字动画效果 (0.153)
CSS progress()函数简介 (0.153)
深入理解CSS中的层叠上下文和层叠顺序 (0.086)
CSS3 pointer-events:none应用举例及扩展 (0.068)
CSS的样式合并与模块化 (RANDOM - 0.004)