如何实现使用css实现滚动条效果
实现效果，运用线性渐变来实现功能
假设我们的页面被包裹在 <body> 中，可以滚动的是整个 body，给它添加这样一个从左下到到右上角的线性渐变：
body { background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%); background-repeat: no-repeat; }
实现的效果：
运用伪类实现把多出来的部分遮住：
body::after { content: ""; position: fixed; top: 5px; left: 0; bottom: 0; right: 0; background: #fff; z-index: -1; }
实际的效果是：
但是滚动到底部，进度条没有到底部，究其原因，是因为 body 的线性渐变高度设置了整个 body 的大小，我们调整一下渐变的高度：
body { background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%); background-size: 100% calc(100% - 100vh + 5px); background-repeat: no-repeat; }
+5px则是滚动进度条的高度，预留出5px的高度：