JS如何跟踪同一容器内三个面板的滚动进度并对应填充独立进度条

所有公式中sectionProgress为0_{100的数值，对应section2的滚动进度占比，计算结果为0}1的数值，直接乘以100%即可作为进度条的填充比例：

• panel1进度（原有逻辑补充边界处理）：Math.max(0, Math.min(1, sectionProgress / 22))
• panel2进度：对应区间长度为75-22=53，公式为Math.max(0, Math.min(1, (sectionProgress - 22) / 53))
• panel3进度：对应区间长度为100-75=25，公式为Math.max(0, Math.min(1, (sectionProgress - 75) / 25))

边界处理Math.max和Math.min的作用是避免sectionProgress超出对应面板区间时，进度值出现负数或者大于1的异常情况，保证进度条不会显示异常。

• 第一步：统一配置面板参数，避免硬编码逻辑，后续调整区间只需修改配置即可，参考配置：

const panelConfig = [
  { key: 'panel1', startProgress: 0, endProgress: 22 },
  { key: 'panel2', startProgress: 22, endProgress: 75 },
  { key: 'panel3', startProgress: 75, endProgress: 100 }
]

• 第二步：计算section2的滚动进度
  监听页面滚动事件，添加节流处理（推荐节流间隔16ms，匹配屏幕刷新率避免性能浪费），获取以下参数：
  section2距离文档顶部的偏移量sectionTop、section2自身高度sectionHeight、当前页面滚动距离scrollTop、浏览器视口高度viewportHeight
  按以下公式计算得到0~100范围的sectionProgress：

  let sectionProgress = ((scrollTop + viewportHeight - sectionTop) / (sectionHeight + viewportHeight)) * 100
  // 截断到0~100范围
  sectionProgress = Math.max(0, Math.min(100, sectionProgress))
  

• 第三步：批量计算各面板进度
  遍历预定义的panelConfig，对每个面板套用对应公式计算进度值
• 第四步：更新进度条样式
  将计算得到的0~1进度值转换为百分比，赋值给对应进度条的width或者transform: scaleX属性即可

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