先了解一下JavaScript 中 scrollHeight , scrollTop , clientHeight 之间的区别

这是一个完整的网页，其中红框里面是目前正在浏览的区域（网页可见区域）。红框里面的高度是 clientHeight ，红框到顶部的距离是 scrollTop ， 而整个网页的高度是 scrollHeight 。了解了这些之后，很简单可以得到目前浏览的地方在整个网页高度百分比的表达式： scrollTop / ( scrollHeight - clientHeight ) 。

进度条

这里使用 MDUI 的进度条，不过需要在样式中加一个 position: fixed 使它悬浮在页面的顶部。

添加代码

在页面引入相关的代码之后，添加一个 JS 并且按照第一部分的方法获取阅读进度：

window.onscroll = function(){
    let Height = document.documentElement.scrollHeight;
    let Top = document.body.scrollTop + document.documentElement.scrollTop;
    let SeeHeight = document.body.clientHeight + document.documentElement.clientHeight;
    let Nowhight = (Top / (Height - SeeHeight)) * 100;
    if (Height <= SeeHeight) {//如果整个网页的高度小于或者等于网页可见区域（没有进度条的情况）
        //document.getElementById("进度条 ID")style.width = "100%";
        //document.getElementById("进度条 ID").remove;
    }
    else{//有进度条的情况
        document.getElementById("进度条 ID").style.width = Nowhight + "%";
    }
}

上面代码中，谷歌浏览器用 document.body 似乎只能在本地获取 SeeHeight 和 clientHeight 的值，上传到服务器要改成 document.documentElement ，不然会报错。而当 document.documentElement 和 document.body 都存在的时候，只会有一个值生效，所以为了适配其他浏览器需要写成 document.body.XXX + document.documentElement.XXX。

这样就可以有一个阅读进度条了。