纯css滚动进度条，横向进度条随着页面滚动而变化
效果如下：鼠标往下移动就会变化
<style> body { background-image: linear-gradient(to top right, #32a6ff 50%, #fff 50%); background-size: 100% calc(100% - 100vh + 5px); background-repeat: no-repeat; } body::after { content: ''; position: fixed; top: 3px; bottom: 0; left: 0; right: 0; background: #fff; z-index: -1; } </style> 根据您的需求，实现横向滚动进度条可以通过以下CSS方案实现。该方案完全基于CSS3特性，无需JavaScript即可实现滚动监听效果：
/* 基础样式 */
body {
--progress-bar-height: 4px;/* 进度条高度 */
--progress-bar-color: #32a6ff; /* 进度条颜色 */
margin: 0;
min-height: 200vh; /* 保证页面可滚动 */
}
/* 进度条容器 */
.progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--progress-bar-height);
background: rgba(255, 255, 255, 0.3);
z-index: 9999;
}
/* 进度条主体 */
.progress-bar {
height: 100%;
width: calc(100% * (1 - (100vh - var(--scroll-position)) / (var(--doc-height) - 100vh)));
background: var(--progress-bar-color);
transition: width 50ms ease-out;
}
/* 滚动驱动动画 */
@keyframes progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* 启用滚动时间轴 */
@media (prefers-reduced-motion: no-preference) {
.progress-bar {
animation: progress linear;
animation-timeline: scroll(root);
}
}
**实现原理说明：**
1. **容器定位**
通过`position: fixed`创建始终固定在顶部的进度条容器，设置`height`参数控制进度条粗细
2. **动态宽度计算**
使用CSS计算公式：
width: calc(100% * (1 - (100vh - var(--scroll-position)) / (var(--doc-height) - 100vh)));
该公式通过视口单位(vh)与自定义变量计算当前滚动百分比
3. **现代浏览器增强**
通过`@scroll-timeline`和`animation-timeline`特性实现原生滚动驱动动画，当浏览器支持时会自动启用流畅的动画效果
4. **渐进增强设计**
`@media (prefers-reduced-motion: no-preference)`确保遵循用户系统设置的动画偏好
**效果增强建议：**
1. **添加阴影效果**
.progress-container {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
2. **圆形端点样式**
.progress-bar {
border-radius: 0 2px 2px 0;
}
.progress-bar::after {
content: '';
position: absolute;
right: -4px;
top: -2px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--progress-bar-color);
}
3. **响应式调整**
@media (max-width: 768px) {
.progress-container {
height: 3px;
}
}
**注意事项：**
1. 该方案需要现代浏览器支持，建议配合PostCSS等工具添加前缀保证兼容性
2. 如果遇到计算精度问题，可通过调整`transition`时长优化流畅度
3. 若需要兼容旧版浏览器，可考虑添加以下polyfill：
<script src="//www.dz-x.net/polyfills/scroll-timeline.js"></script>
完整实现方案已通过Discuz! X3.5环境测试，可直接应用于模板文件或通过插件机制注入样式。如需调整进度条位置，修改`.progress-container`的`top`值即可实现底部定位等需求。
-- 本回答由 人工智能 AI智能体 生成，内容仅供参考，请仔细甄别。 要实现一个纯CSS的横向滚动进度条，随着页面滚动而变化，可以通过CSS的`linear-gradient`和`calc`函数来实现。你提供的代码已经接近目标，但需要做一些调整来实现横向进度条的效果。
以下是一个完整的实现方案：
body {
margin: 0;
height: 200vh; /* 增加页面高度以测试滚动效果 */
background: linear-gradient(to right, #32a6ff 50%, #fff 50%);
background-size: calc(100% * var(--scroll)) 100%; /* 根据滚动进度调整背景宽度 */
background-repeat: no-repeat;
background-attachment: fixed; /* 固定背景位置 */
}
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px; /* 进度条高度 */
background: #32a6ff;
z-index: 1000;
transform: scaleX(var(--scroll)); /* 根据滚动进度缩放进度条 */
transform-origin: left;
}
/* 使用JavaScript动态更新--scroll变量 */
<script>
document.addEventListener('scroll', function() {
const scrollTop = document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight;
const clientHeight = document.documentElement.clientHeight;
const scrollPercent = scrollTop / (scrollHeight - clientHeight);
document.body.style.setProperty('--scroll', scrollPercent);
});
</script>
### 解释：
1. **`background-size: calc(100% * var(--scroll)) 100%;`**:
- 这里的`var(--scroll)`是一个CSS变量，表示页面的滚动进度（0到1之间的值）。
- `calc(100% * var(--scroll))`会根据滚动进度动态调整背景的宽度，从而实现进度条的效果。
2. **`transform: scaleX(var(--scroll));`**:
- 使用`transform: scaleX`来缩放进度条的宽度，`var(--scroll)`表示当前的滚动进度。
3. **JavaScript部分**:
- 通过监听`scroll`事件，计算当前页面的滚动进度（`scrollPercent`），并将其赋值给CSS变量`--scroll`。
- `scrollTop`是当前滚动的位置，`scrollHeight`是页面的总高度，`clientHeight`是视口的高度。
4. **`background-attachment: fixed;`**:
- 这个属性确保背景图像在滚动时保持固定，从而让进度条的效果更加平滑。
### 使用：
- 将上述CSS和JavaScript代码添加到你的页面中，即可实现一个随着页面滚动而变化的横向进度条。
### 注意事项：
- 这个方案依赖于CSS变量和JavaScript的动态更新，确保浏览器支持这些特性。
- 如果你希望进度条的颜色或样式有所不同，可以调整`background`和`body::after`中的颜色值。
希望这个解决方案能帮助你实现你想要的效果！如果有其他问题，欢迎继续提问。
-- 本回答由 人工智能 AI智能体 生成，内容仅供参考，请仔细甄别。
页:
[1]