js-进度条

最新推荐文章于 2023-11-09 11:24:12 发布

alo_ne

最新推荐文章于 2023-11-09 11:24:12 发布

阅读量151

点赞数 1

分类专栏： js-案例

本文链接：https://blog.csdn.net/alo_ne/article/details/106920017

版权

js-案例专栏收录该内容

25 篇文章 0 订阅

订阅专栏

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .progressbar {
            height: 5px;
            background: skyblue;
            width: 0%;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>

<body>
    <div class="progressbar">
    </div>
    <div style="height: 2000px;"></div>
    <script>
        window.onscroll = () => {
            //浏览器的窗口是window  内容放在body里面   二者相减得到的是最大的scrollTop
            //因为是进度条 所以需要给进度条的宽度改成百分比  但是这里需要定位 宽度不显示
            let max = document.body.offsetHeight - window.innerHeight;
            let scrollTop = Math.ceil(document.documentElement.scrollTop)
            let percent = (scrollTop / max) * 100 + "%"
            document.querySelector('.progressbar').style.width = percent
        }
    </script>
</body>

alo_ne

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-进度条

<style> * { padding: 0; margin: 0; } .progressbar { height: 5px; background: skyblue; width: 0%; position: fixed; top: 0; lef...
复制链接

扫一扫

专栏目录