进度条demo

wsmiya

于 2020-06-26 08:54:40 发布

阅读量122

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wsmiya/article/details/106965754

版权

进度条练习

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .progressbar{
            height: 3px;
            background: skyblue;
            position: fixed;
            top: 0;
            left: 0;
            width: 30%;
        }
    </style>

<div class="progressbar"></div>
    <div style="height: 2000px;"></div>

<script>
        window.onscroll = ()=>{
            let scrollTop = Math.floor(document.documentElement.scrollTop)
            let macScrollTop = document.body.offsetHeight - window.innerHeight
            let percent = (scrollTop * 100 / macScrollTop) + '%'
            document.querySelector('.progressbar').style.width = percent
        }
    </script>