概述

首先横向的进度条在web页面随处可见，比如我们最爱阅读的阮一峰的《es6标准入门》。

1605708073(1).jpg

这样一个简单的进度条，应该怎么处理了？

html代码演示

 <div class="box" id='first'>
        <div id='box1'></div>
        <div style="margin-top:-5px;">
 这里的内容足够多撑起整个盒子
</div>

css代码演示

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            margin:0px auto 0 auto;
            height: 100vh;
            overflow-y: auto;
            width: 50%;
        }
        #box1 {
            width: 0;
            position: sticky;
            top: 0;
            height: 5px;
            background: red;
        }
    </style>

position: sticky 这个属性特别值得注意，这是css3关于定位的一个新属性，粘性布局。简单解释就是没滚动，和relative是一个效果，滚动了和fixed是一个效果。但是必须设置,top,left,bottm,right其中的一个值。

js代码演示

  window.onload = function () {
            let obody=document.getElementsByTagName('body')[0]

            let obox = document.getElementById('first')
            console.log(obox.clientHeight,obox.scrollHeight,obody.clientHeight,'333')
            let oheight = obox.scrollHeight
                let aheight = obox.clientHeight
                let allheight=(+oheight)-(+aheight)
                let xbox=document.getElementById('box1')
            obox.addEventListener("scroll", () => {
                console.log(obox.scrollTop/allheight)
                xbox.style.width=(obox.scrollTop/allheight)*100+'%'     
            })
        }

结尾

这样一个简简单单的进度条就有了，其实列如吸顶效果也可以用。但是目前兼容性还存在一定问题。最后看下效果。

滚动.gif