顶部进度条动态伸缩效果需监听scroll事件并用requestanimationframe节流更新，宽度公式为(scrolltop/(scrollheight-clientheight))×100%，推荐用transform:scalex()配合css过渡实现顺滑动画。

在 H5 移动端长图文阅读场景中，顶部进度条的动态伸缩效果（即随滚动实时更新宽度，并带平滑动画）本质是监听滚动、计算比例、驱动 CSS 过渡。关键不在于“伸缩”本身，而在于如何让进度条宽度响应式变化且视觉自然。

用 scroll 事件 + requestAnimationFrame 控制更新节奏

直接在 scroll 中修改样式会频繁触发重排，导致卡顿。应节流处理：

• 监听 scroll，但只标记“需要更新”，不立即计算
• 用 requestAnimationFrame 在下一帧统一读取 scrollTop 和 scrollHeight，再更新进度条宽度
• 避免使用 touchmove（iOS 滚动惯性下可能漏帧）

进度条宽度 = (scrollTop / (scrollHeight - clientHeight)) × 100%

这是核心公式，注意三点：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• clientHeight 是可视区域高度（document.documentElement.clientHeight 或 window.innerHeight）
• 分母必须是 scrollHeight - clientHeight，否则拉到底时进度会超 100%
• 首次加载时若内容未渲染完成，scrollHeight 可能不准，建议在 DOMContentLoaded 后或图片加载完再初始化

用 CSS transition + transform 实现顺滑动画

不要直接过渡 width（可能触发重排），推荐方案：

• 进度条容器设固定高度和 overflow: hidden
• 内部子元素用 transform: scaleX(x) 缩放，配合 transform-origin: left
• CSS 写：transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)（缓入缓出更自然）
• JavaScript 只需设置 style.transform = 'scaleX(' + progress + ')'，progress 范围 0~1

适配吸顶与状态切换（如进入/离开阅读区）

顶部进度条常需吸顶（position: sticky 或 fixed），此时要注意：

• 用 getBoundingClientRect().top 判断是否已吸顶，动态添加 class 控制样式（如背景色、z-index）
• 滚动极慢或暂停时，可加防抖逻辑：连续 100ms 无滚动则暂停动画，提升性能
• 返回顶部按钮点击后，手动重置进度条并触发动画，避免跳变

不复杂但容易忽略细节——滚动精度、缩放锚点、初始时机、动画曲线，把这几处对齐，就能做出既轻量又顺滑的顶部阅读进度条。