精准滚动监听需JS实现而非CSS；scroll事件中直接操作样式易导致卡顿，应使用requestAnimationFrame优化；需缓存scrollHeight并处理边界；移动端需用visualViewport API应对软键盘弹出导致的fixed元素位移。
不能只靠 position: fixed 实现“精准滚动监听”——fixed 是定位方式，监听必须由 JS 完成；CSS 只负责呈现，JS 才能读取 window.scrollY、document.documentElement.scrollHeight 等动态值。
为什么 scroll 事件里直接改 style.width 会卡顿或跳变
原生 scroll 在 macOS 触控板或 iOS Safari 上每秒可触发上百次，每次都读 DOM 属性 + 写内联样式，极易触发强制同步布局（layout thrashing）。
- 别在
scroll回调里直接计算并设置progressBar.style.width - 用
requestAnimationFrame包一层，确保每帧最多更新一次 - 缓存
document.documentElement.scrollHeight，只在resize或 DOM 显著变化后重读（它不是实时响应的） - 边界必须处理：
if (maxScrollHeight ，否则除零或负值会导致 NaN
iOS Safari 中 window.scrollY 和视口高度不一致怎么办
iOS Safari 地址栏收起/展开时会改变 window.innerHeight，但 window.scrollY 不同步更新，导致进度条倒退或卡在 99%。
- 必须监听
resize事件，并在回调中重新校准缓存的maxScrollHeight - 不要用
document.body.scrollHeight——部分文档模式下它为0，一律用document.documentElement.scrollHeight - 首次加载也要手动执行一次检查，防止带 hash 刷新后
scrollY > 0但类没切换
如何让 fixed 元素在软键盘弹出时不位移
移动端输入框聚焦后，position: fixed 元素常被顶出视口，尤其在 iOS 上——这不是 bug，是 visualViewport 高度压缩导致的定位基准偏移。
立即学习“前端免费学习笔记（深入）”；
- 优先使用
visualViewportAPI 监听：visualViewport.addEventListener('resize', handler)，当height下降超 150px 时判定键盘弹出 - 通过
classList.toggle()切换预设 CSS 类（如keyboard-active），避免直接写style.top触发重排 - 降级方案：老浏览器监听
input:focusin和input:focusout，但无法区分键盘是否真弹出 - 绝对不要用
vh单位设置top或height，软键盘弹出后100vh仍是物理屏幕高度
真正难的不是写几行 scroll 监听，而是应对 iOS 的视口抖动、Safari 的 scrollY 滞后、以及 resize 和 scroll 事件的竞态——这些边界情况不覆盖，用户一滚动就露馅。
