纯CSS实现的滚动指示器效果

我这里实现的方法去传统的CSS滚动指示器适用的场景要广泛的多，且使用更简单。

滚动页面，观察最顶端的条状进度。

滚动指示器建议在页面滚动高度超过一屏的时候使用。

代码

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;
}
HTML代码：
<!-- 在<body>标签内插入指示器元素 -->
<div class="indicator"></div>

原理

使用mix-blend-mode:darken改进实现。

具体介绍参见这篇文章：更好的纯CSS滚动指示器技术实现