网页浏览进度条

在很多网站都能看到网站的顶部，有一条会随着页面滚动条的滑动，边长变短的一栏区域，这个可以有效的让用户看到，自己已经浏览了这个文章内容的多少。虽然网站右边都有一个滚动条了，干嘛还要这个东西呢，大概就是为了好看吧！今天来实现这个小demo！

用到的知识

css

position:fixed

• 固定div在某个位置

js

document.documentElement.scrollTop

• 获取滚动条滚动过的height(width)

document.body.clientHeight

• 获取当前文档的height(width)

document.documentElement.clientHeight

• 获取当前可视窗口的height(width)

scroll

• 当页面滚动条发生移动时，触发

分析

问题

• 固定我们的进度条在页面的顶部
• 如何让进度条在每次滚动条滚动时，发生变化
• 变化时，变化多少

解决

• 通过设置position:fixed;top:0;固定位置
• 通过给window绑定scoll事件来实时改变进度条长度
• 变化多少：设置进度条初始长度为100vw，这样在什么显示器，宽度都会占满显示器，其次在获取当前可视窗口的height和当前网页的总height；之后通过 (文档总长-屏幕可视窗口height)/当前屏width；计算出进度条和文档长的比例关系。来控制每次进度条应该变化多少。

代码

CSS

body {
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden;
    position: relative;
}

.con {
    width: 100vw;
    /* 让页面出现滚动条 */
    height: 1000vh;
    background-color: lightblue;
}

.top {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 5px;
    background-color: lightcoral;
}

HTML

<!-- 进度条 -->
<div class="top" id="top"></div>
<!-- 网站内容 -->
<div class="con" id="con"></div>

JS

let slip = document.querySelector('#top');
let con = document.querySelector('#con');
let viewHeight = document.documentElement.clientHeight;
// 获取当前屏宽
let slipWidth = slip.clientWidth;
// 获取文档总长
let documentHeight = document.body.clientHeight;
// (文档总长-屏幕可视窗口height)/当前屏width
let prop = slipWidth / (documentHeight - viewHeight);
// 初始化 让top宽度变为0
slip.style.width = 0;
// 设置宽度
let setWith = (dom, h) => {
    dom.style.width = `${h}px`;
    dom.style.transition = "width 0.5s";
};
window.addEventListener("scroll", () => {
    // 实时获取滑动的高度
    let scroHeight = document.documentElement.scrollTop;
    setWith(slip, scroHeight * prop);
});