滚动圆形进度环特效（容器滚动百分比圆环，颜色实时可调）

效果演示（真实可交互）

演示区右上角的圆环实时反映左侧滚动容器的阅读进度。圆环颜色与中心百分比均可通过下方控件调节。正式使用时把监听对象换成 window 即可作用于整页。

完整代码

<svg class="ring" viewBox="0 0 120 120">
  <circle class="track" cx="60" cy="60" r="52" />
  <circle class="bar" id="bar" cx="60" cy="60" r="52" />
</svg>

.bar {
  fill: none;
  stroke: #6c8cff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 326.7;      /* 圆周长 2πr */
  stroke-dashoffset: 326.7;     /* 初始完全隐藏 */
}

const CIRC = 2 * Math.PI * 52;
function update() {
  const max = scroller.scrollHeight - scroller.clientHeight;
  const pct = max > 0 ? Math.max(0, scroller.scrollTop) / max : 0;
  bar.style.strokeDashoffset = (CIRC * (1 - pct)).toFixed(1);
}
scroller.addEventListener('scroll', update, { passive: true });

实现要点：圆的 stroke-dasharray 等于周长，滚动进度为 p 时把 stroke-dashoffset 设为 周长 × (1 - p)，笔画按比例「露出」，看起来就像圆环被逐渐填满。SVG 加 transform: rotate(-90deg) 让起点位于正上方，更符合进度环习惯。

参数说明

兼容性与性能

• 滚动回调只做一次减法乘法和一次 strokeDashoffset 写入，SVG 属性动画在合成器处理，开销可忽略
• 监听器使用 { passive: true }，不阻塞滚动线程；toFixed(1) 避免浮点抖动造成的笔画闪烁
• 进度计算带 max > 0 与 Math.max(0, ...) 双重保护，内容不满一屏或 iOS 橡皮筋回弹时都不会出现异常值
• 全浏览器兼容（Chrome / Safari / Firefox / Edge / iOS / Android），SVG 原生支持，无需任何 polyfill

常见问题

Q: 圆环不转、一直是空的？ 大概率是 stroke-dasharray 与半径不匹配：半径 52 时周长是 326.7，改过半径记得同步更新两个值，否则进度比例会错乱。

Q: 想让它转起来而不是「被填满」？ 那是另一类效果。本组件的「填满」语义更适合进度；若想要旋转装饰，请把动画放在 transform: rotate() 上而非 dashoffset。

Q: 圆环可以点击回到顶部吗？ 可以。给 .spc-ringbox 加 cursor: pointer 与 click 监听，调用 scroller.scrollTo({ top: 0, behavior: 'smooth' }) 即可，视觉上还能加悬停放大。

Q: 可以商用吗？ 可以。本组件为粤喵自研原创代码，免费商用无需署名，无任何协议限制。