老板让我做一个顶部进度条，但是我不会JS啊

凌晨一点十五分，老板一个电话把我吵醒。

“我在刷国外某网站的时候发现它们页面顶部的滚动条很实用，让用户可以清晰直观地知道剩下还有多少视频可以观看，我也能提前腾出手来准备点分页按钮，你赶紧给我们的项目页面加一个。”

“可是老板，这个效果这么难，要怎么实现啊？”

“ez，用js监听滚动事件，算出当前页面滚动条的剩余高度，结合antd的进度条一把嗦，收徒。”

“可是老板，我不会js啊！”

（电话挂断）

“早知道，不会js也会被...”

言归正传，页面的顶部进度条算是现在比较常见的需求了，可以让用户（特别是移动端）清晰地知道当前页面还剩余多少内容未阅读。

开发思路也比较固定，用js获取页面当前滚动的高度，算出百分比，随意结合一个进度条的组件就可以实现了。

但是如果不用js，用纯css能不能实现呢？话不多说，我们换一种方式帮老板收徒，开整。

先用简单的代码创建一个具有溢出高度的页面结构。

<div className="main-container">
  <div className="text-container">
    {Array(300).fill(0).map((_, i) =>
      <div key={i} className="item">
        我是第{i}行文字
      </div>
    )}
  </div>
</div>

.main-container {
    height: 100vh;
    overflow: auto;
}
```

效果也很简单，如图所示。

下面，见证奇迹的时刻到了，我们用css的线性渐变，给父容器加一个背景颜色。

.text-container {
    background-image: linear-gradient(to right top, greenyellow 50%, white 50%);
}

效果如图所示。

是不是非常的amazing呢，聪明的小伙伴此时一定会说：“哦！我知道该怎么做了！”

非常好！相信大家都知道后续的实现步骤了，那本篇文章就先到这里，再见！

秉持着收徒的严谨态度，我们继续来进行后续的实现。

我们给父容器加一个after伪元素，用它来遮罩住背景图，同时给父元素设置相对定位，以让伪元素的fixed定位位置正确生效。为了更明显地展示遮罩的逻辑，这里暂时先用紫色来填充。

.text-container {
    background-image: linear-gradient(to right top, greenyellow 50%, white 50%);
    
    position: relative;
    z-index: 10
}

.text-container::after {
    content: "";
    z-index: -1;
    background: purple;
    
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
}

效果如图所示。

OK，那事已至此，我们再把背景background换成白色white，就大功告成啦。

易如反掌 [yì rú fǎn zhǎng]，指像翻一下手掌那样容易，比喻事情很简单，非常容易完成。