CSS滚动指示器

一、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滚动指示器效果虽然方法和思路非常精妙，但是却有致命的缺陷，导致几乎无法在实际项目中应用。

致命缺陷是：

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

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

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

四、我想到的更好的实现

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

具体操作如下：

1. 在标签内插入指示器元素：

   <div class="indicator"></div>
   

2. 粘贴如下所示的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滚动指示器为了防止对角渐变（也就是滚动进度条）的覆盖页面上的元素内容，因此写在了最底层的body元素上，这就导致如果body元素内的普通元素内容有背景色，或者背景图之类的，就会覆盖进度条，产生致命缺陷。

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

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

五、其他说明和结语

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

1. 进度条的颜色尽量取深色，因为本身包含darken混合模式，如果颜色过浅，很容易被底部的内容颜色给混合。

2. CSS滚动指示器需要在页面滚动高度超过一屏的时候才出现。原因有两方面：一是如果滚动高度过小，没有必要使用滚动指示器；二是滚动指示器本质上是一个渐变，如果滚动高度不足，则进度条的边缘会过于倾斜而导致显示效果不完美。