顶部进度条动态伸缩效果需监听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 <= 0判断是否已吸顶，动态添加 class 控制样式（如背景色、z-index） - 滚动极慢或暂停时，可加防抖逻辑：连续 100ms 无滚动则暂停动画，提升性能
- 返回顶部按钮点击后，手动重置进度条并触发动画，避免跳变
不复杂但容易忽略细节——滚动精度、缩放锚点、初始时机、动画曲线，把这几处对齐，就能做出既轻量又顺滑的顶部阅读进度条。
