效果如下：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>純CSS滾動指示器技術實現</title>
</head>
<style>
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;
}
</style>
<body>
<!-- 在<body>標籤內插入指示器元素 -->
<div class="indicator"></div>
<div style="height: 10000px;"></div>
</body>
</html>