网页浏览进度条

网页浏览进度条

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

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