纯CSS滚动指示器技术实现

<style>
	body {
	    position: relative;
	}
	.indicator {
		height: 1900px;
	    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>

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

转至：（张鑫旭）https://link.juejin.im/?target=https%3A%2F%2Fwww.zhangxinxu.com%2Fwordpress%2F2019%2F06%2Fbetter-css-scroll-indicator%2F