纯CSS实现带已滚动进度线与垂直居中粘性指示器的时间轴问题求助

大家好！我现在正在尝试用纯CSS实现一个带进度指示器的垂直时间轴，之前用JavaScript已经做出来了，但想看看纯CSS能不能搞定。

需求是这样的：有一个粘性的指示器，初始在顶部，滚动时会移动到容器中间，最后停在底部——就是那种给top: 50%;的粘性元素在容器里的正常行为。但现在卡壳的地方是：指示器下方的时间轴要显示灰色，上方已经滚动过的部分要显示彩色，这样能直观看到已经浏览过的进度。

我现在的问题是：用来标记已滚动部分的彩色时间轴条会溢出容器。因为粘性指示器的存在，我不能给容器加overflow: hidden;来截断溢出的部分；而且我也没办法在时间轴的上下方额外加元素。有没有大佬能给我支个招呀？提前谢过大家了！😊

我当前的代码： #

HTML

<div class="timeline-container">
  <div class="timeline"></div>
  <div class="timeline-passed"></div>
  <div class="timeline-indicator"></div>
</div>

CSS

html, body { 
  margin: 0; 
  padding: 0; 
}

.timeline-container { 
  position: relative; 
  height: 100vh; 
  margin-top: 75vh; 
  margin-bottom: 75vh; 
  background-color: burlywood; 
  /* 可惜因为粘性指示器的存在，overflow hidden不能用 */
  /* overflow: hidden; */ 
}

.timeline, .timeline-passed { 
  position: absolute; 
  top: 0; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 4px; 
  height: 100%; 
  background: lightgray; 
}

.timeline-passed { 
  position: fixed; 
  background: teal; 
  transform: translate(-50%, -50%); 
}

.timeline-indicator { 
  position: sticky; 
  top: 50%; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 16px; 
  height: 16px; 
  background: slategray; 
  border: 2px solid darkslategray; 
  border-radius: 999999px; 
}

内容来源于stack exchange