使用纯CSS实现一个滚动进度条"使用纯CSS实现一个滚动进度条 ```html <!DOCTYPE html> <ht

"使用纯CSS实现一个滚动进度条

<!DOCTYPE html>
<html>
<head>
<style>
.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #f2f2f2;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar-inner {
  height: 100%;
  width: 0%;
  background-color: #4CAF50;
  transition: width 0.5s ease-in-out;
}

body {
  height: 2000px;
}

/* 模拟页面滚动 */
body::after {
  content: \"\";
  display: block;
  height: 4000px;
}
</style>
</head>
<body>
<div class=\"progress-bar\">
  <div class=\"progress-bar-inner\"></div>
</div>

<script>
window.addEventListener('scroll', function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var windowHeight = document.documentElement.clientHeight || window.innerHeight;
  var documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  var scrollPercentage = (scrollTop / (documentHeight - windowHeight)) * 100;
  var progressBarInner = document.querySelector('.progress-bar-inner');
  progressBarInner.style.width = scrollPercentage + '%';
});
</script>
</body>
</html>

这段代码实现了一个滚动进度条，使用纯CSS和一点点JavaScript。首先，我们创建了一个包含进度条的容器，用于显示进度条的背景颜色和形状。然后，我们使用一个内部的元素来表示进度条的进度，通过设置其宽度为0来初始隐藏进度条。

在JavaScript部分，我们监听页面的滚动事件，通过计算滚动的位置和页面的高度，来确定滚动的百分比。然后，我们通过选择器获取进度条的内部元素，将其宽度设置为计算得到的滚动百分比，从而实现进度条的动态效果。

需要注意的是，为了模拟页面滚动，我们在CSS中设置了body元素的高度为2000px，并在其后添加了一个伪元素，使页面看起来有滚动条。

这段代码可以直接在浏览器中运行，当你滚动页面时，进度条会根据滚动位置显示相应的进度。你可以根据需要修改进度条的样式，比如修改颜色、高度等。 "