css实现滚动条进度效果

如何得知用户当前的滚动页面距离并且通知进度条？

试想：如果页面滚动和进度条是一个整体呢？
用线性渐变来实现：

.body{
    position: relative;
    padding: 50px;
    line-height: 30px;
    width: 600px;
    height: 1200px;
    background-image: linear-gradient(to right top,#ffcc00 50%,#eee 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
    z-index: 1; 
}
.body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: white;
    z-index: -1;
    
}