网页浏览进度条

网页浏览进度条

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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

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

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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);
});

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!