用HTML代码制作网页顶部彩色阅读进度条-html教程-PHP中文网

滚动进度条必须用js计算window.scrolly / (document.documentelement.scrollheight - window.innerheight)并节流更新，因fixed元素width:100%仅相对于视口，无法反映真实滚动比例；需用requestanimationframe节流、缓存scrollheight、处理ios safari地址栏收放及不可滚动边界情况。

用html代码制作网页顶部彩色阅读进度条

什么是 `window.scrollY` 和 `document.documentElement.scrollHeight`

彩色阅读进度条本质是根据用户当前滚动位置占全文高度的比例，动态更新一个顶部横条的宽度和颜色。关键不是“画一条线”，而是实时算出：window.scrollY（已滚动像素）除以document.documentElement.scrollHeight - window.innerHeight（可滚动总高度），得到 0~1 的进度值。

注意：document.body.scrollHeight 在某些 CSS 重置或 DOCTYPE 下不准，必须用 document.documentElement.scrollHeight；window.innerHeight 是可视区高度，不能漏减——否则进度会超过 100%。

用 `position: fixed` 实现顶部吸附条

进度条必须始终贴在视口顶部，且不随页面滚动偏移。最稳妥方式是用 position: fixed + top: 0，同时设置 z-index: 9999 避免被其他元素遮挡。

常见错误：用 position: sticky 或放在 <header></header> 内部——前者依赖父容器，后者会随页面滚动消失；用 absolute 更糟，完全脱离文档流且无法固定在视口顶。

推荐结构：

<div id="progress-bar" style="position: fixed; top: 0; left: 0; height: 4px; width: 0%; background: linear-gradient(90deg, #ff6b6b, #4ecdc4); z-index: 9999; pointer-events: none;"></div>

用 `requestAnimationFrame` 替代 `scroll` 事件监听

直接监听 scroll 事件会导致高频触发、卡顿甚至掉帧。浏览器每秒滚动可能触发上百次，但屏幕刷新通常只有 60fps，没必要每次都算。

正确做法是用 requestAnimationFrame 节流：只在下一帧绘制前读取一次滚动值，既平滑又省资源。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

实操要点：

把滚动监听器设为 { passive: true }，避免阻止默认行为导致性能警告
不要在回调里直接改 style.width，先算好百分比，再一次性赋值
避免重复绑定——检查是否已存在 #progress-bar 再创建

简短示例逻辑：

let bar = document.getElementById('progress-bar');<br>function updateProgress() {<br>  const scrollY = window.scrollY;<br>  const maxScroll = document.documentElement.scrollHeight - window.innerHeight;<br>  const progress = Math.min(100, (scrollY / maxScroll) * 100);<br>  bar.style.width = `${progress}%`;<br>}<br>function handleScroll() {<br>  requestAnimationFrame(updateProgress);<br>}<br>window.addEventListener('scroll', handleScroll, { passive: true });