滚动进度球用 background-position 而非 transform，因其不触发重排、仅重绘，性能更优；需配合 fixed 定位伪元素、radial-gradient 高光、requestAnimationFrame 及 px/rem 单位，并修正 scrollHeight 计算与 iOS 滚动兼容性。
滚动进度球为什么用 background-position 而不是 transform
因为 transform 会让元素脱离文档流、触发重排，而滚动中频繁重排性能差；background-position 只触发布局后的一次重绘，更轻量。尤其在长页面或低端设备上，卡顿明显可感知。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把进度球设为固定定位的伪元素（
::before或::after），避免额外 DOM 节点 - 背景图用纯色渐变 +
radial-gradient模拟球体高光，不依赖图片 - 计算逻辑放在
requestAnimationFrame里，避免scroll事件直接绑定导致丢帧 - 不要用
%单位写background-position，它在滚动中会因容器尺寸抖动——统一用px或rem
scrollHeight 和 scrollTop 怎么算出精确滚动百分比
常见错误是直接用 window.innerHeight / document.body.scrollHeight，这忽略了页面可能有 margin、padding 或滚动条宽度干扰，导致球体提前到底或悬停在半空。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
document.documentElement.scrollHeight替代body.scrollHeight，兼容 quirks mode - 百分比公式必须是：
(window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) - 加个
Math.min(1, Math.max(0, ...))防止浮点误差溢出，否则球会闪到视口外 - 在 CSS 中用
calc(50% + (var(--pct) * 50px))这类表达式时，确保--pct是 0–1 小数，不是 0–100 整数
圆角球体如何靠 border-radius 和 box-shadow 实现立体感
只靠 border-radius: 50% 是个扁平圆，没有“球”的纵深；强行加 gradient 背景又难控制光照方向，滚动时容易穿帮。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 球体本身用
border-radius: 50%+width/height相等 +overflow: hidden - 高光用
box-shadow: inset 0 0 20px rgba(255,255,255,0.6)，比背景渐变更稳定 - 阴影用
box-shadow: 0 4px 12px rgba(0,0,0,0.15)，避免用filter: drop-shadow()，后者在缩放或 transform 下易糊 - 禁用
will-change: transform，它对background-position无效，反而增加图层合成开销
移动端 Safari 滚动时进度球跳动或失效
这是 iOS WebKit 的经典问题：scroll 事件在惯性滚动中不触发，且 scrollY 在 overscroll 回弹阶段返回负值或超大值，导致球体乱飞。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
touchmove+scroll双事件，但只在touchmove中更新临时变量，scroll中才真正计算位置 - 用
getBoundingClientRect().top替代scrollY做兜底（适用于球体固定在视口右下角场景） - 禁用
-webkit-overflow-scrolling: touch（已废弃），改用overscroll-behavior: contain防止回弹干扰 - 在
@supports (background-position: center 10px)里启用该方案，老 Android 4.x 不支持动态background-position，得降级为transform
最麻烦的其实是滚动精度——不同浏览器对 scrollHeight 的四舍五入策略不同，同一页面在 Chrome 和 Safari 可能差 1–3px，这点必须在 JS 里做容错，不能指望 CSS 补齐。