时间：2023-10-06 18:06:01 | 来源：网站运营
时间：2023-10-06 18:06:01 来源：网站运营
CSS+HTML<页面滚动条进度效果>：
在线咨询
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>关键词：进度,效果,滚动
