JavaScript监听滚动条的进度条

        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .g-box{
                width: 100%;
                height: 4000px;
                background-color: #1AB1CC;
            }
            .progress{
                width: 6px;
                height: 0%;
                background-color: deeppink;
                position: fixed;
                top: 0;
                right: 0;
            }
        </style>

        <div class="g-box"></div>
        <div class="progress"></div>

        <script type="text/javascript">
            (function(){
                // 页面的总搞得
                let pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
                // 浏览器视口高度
                let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                // 可滚动的高度
                let scrollAvail = pageHeight - windowHeight;
                window.onscroll = function (){
                    // 获取滚动条的高度
                    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    // 计算占比
                    document.querySelector('.progress').style.height = (scrollTop/scrollAvail)*100 +'%'
                }
            })()
            /*
             document.body  返回文档的body元素
             document.documentElement  返回文档的根节点
             window.onscroll  浏览器窗口滚动时触发
             querySelector  获取类名为progress的元素
             element.scrollHeight  返回元素的整体高度
             element.scrollWidth  返回元素的整体宽度
             element.scrollLeft  返回元素左边缘与视图之间的距离
             element.scrollTop  返回元素上边缘与视图之间的距离
             */
        </script>