阅读进度 html,CSS+HTML<页面滚动条进度效果>

效果图：

scroll.gif

此篇文章是方便效果呈现才设计成这样，各位可以 "取其精华" 🀄 用来设计自己想要的样子~~

🎈DOMContentLoaded监听页面是否加载完成，完成后才执行

🎈.setProperty参数解析：

1.CSSStyleDeclaration：此对象表示CSS规则的主体部分，也就是大括号内的部分。

2.propertyName：必需，要设置值的CSS属性名称。

3.value：可选，设置CSS属性的值，默认为空字符串。

4.priority：可选，设置CSS的优先级，固定值为"!important"。

点击查看详细介绍

CSSStyleDeclaration.setProperty(propertyName, value, priority)

🎈var(--scroll)是基于css的样式变量，此篇文章通过修改全局的 --scroll的变量实现的样式效果

点击查看详细介绍

var root = document.body.style;

root.setProperty('--scroll', percent);

技多不压身，多学点新的才能有所进步~~~ 🎉

代码如下：

Document

body {

width: 100%;

margin: 0;

display: flex;

justify-content: center;

align-items: center;

}

.box {

width: 400px;

height: 100px;

position: fixed;

box-shadow: 0 0 5px #ccc;

top: calc(50% - 50px);

left: calc(50% - 200px);

display: flex;

justify-content: center;

align-items: center;

}

.text {

position: relative;

z-index: 5;

font-size: 30px;

color: white;

font-weight: bold;

text-shadow: 2px 2px 5px rgb(70, 70, 70);

}

.progress {

width: calc(var(--scroll)*1%);

height: 100%;

display: block;

background: rgb(96, 207, 44);

position: absolute;

left: 0;

top: 0;

}

0

document.addEventListener('DOMContentLoaded', function () {

var root = document.body.style;

var text = document.querySelector('.text')

window.addEventListener('scroll', scroll);

function scroll() {

//滚动条距离顶部高度

var scrollTop =

window.pageYOffset ||

document.documentElement.scrollTop ||

document.body.scrollTop;

//window.innerHeight 窗口的可视高度

//document.body.offsetHeight body的高度及内容的高度

//滚动条进度百分比

var percent = scrollTop / (document.body.offsetHeight - window.innerHeight) * 100

root.setProperty('--scroll', percent);

text.innerHTML = percent.toFixed(0) + '%'

}

});