CSS+HTML<页面滚动条进度效果>
2020-01-16 本文已影响0人
誰在花里胡哨
效果图：
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);
技多不压身，多学点新的才能有所进步~~~ 🎉
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
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;
}
</style>
</head>
<body>
<div class="box">
<div class="progress">
</div>
<span class="text">0</span>
</div>
<div style="width:1px;height:2000px;"></div>
</body>
<script>
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) + '%'
}
});
</script>
</html>
