如何實現使用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的高度：