如何实现滚动到对应区域时才激活SVG环形百分比进度条动画

第一步：调整CSS样式 #

把原本写在.circle选择器里的动画属性移除，单独放到一个触发类中，避免页面加载就自动执行动画：

/* 修改后的.circle样式 */
.circle {
 fill: none;
 stroke-width: 2.8;
 stroke-linecap: round;
 /* 把原有的animation属性迁移到下方新增的触发类中 */
}
/* 新增动画触发类 */
.circle.animated {
  animation: progress 1s ease-out forwards;
}

/* 其余原有CSS代码无需修改 */
.circular-chart {
 display: block;
 margin: 10px auto;
 max-width: 80%;
 max-height: 250px;
}
.circle-bg {
 fill: none;
 stroke: #eee;
 stroke-width: 3.8;
}
@keyframes progress {
0% {
 stroke-dasharray: 0 100;
   }
 }
.circular-chart.orange .circle {
 stroke: #ea5031;
 }
.percentage {
 fill: #666;
 font-family: sans-serif;
 font-size: 0.5em;
 text-anchor: middle;
 } 

第二步：添加滚动监听触发逻辑 #

使用性能更优的IntersectionObserver API实现元素进入视口检测，无需监听滚动事件，不会造成额外性能损耗：

// 等待DOM结构加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 选中页面内所有环形进度条元素
  const circularCharts = document.querySelectorAll('.circular-chart');
  // 定义观察者实例
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      // 当进度条元素进入视口时触发
      if (entry.isIntersecting) {
        // 给当前进度条的环形路径添加动画触发类
        const circleEl = entry.target.querySelector('.circle');
        circleEl.classList.add('animated');
        // 触发一次后取消监听，避免滚动重复触发动画
        observer.unobserve(entry.target);
      }
    })
  }, {
    threshold: 0.1 // 元素露出10%时触发，可根据需求自行调整数值
  });
  // 给所有进度条绑定监听
  circularCharts.forEach(chart => {
    observer.observe(chart);
  })
})

修改完成后，进度条只会在滚动到视口范围内时才会触发动画，不会在页面加载时自动执行。

内容的提问来源于stack exchange，提问作者Marruf Mihal