网页浏览进度条

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

用到的知识

css

position:fixed

固定div在某个位置

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>

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);
});