时间线效果仅 CSS [已关闭]

Question

这是一个演示，其中包含我想要实现的结果：

https://ultimateelementor.com/widgets/timeline/#content_timeline

有居中的灰色（非活动）线，滚动时变为紫色（活动）。有人可以给出如何仅使用 CSS 来实现这一点的想法吗？

我尝试了一些

background-attachment: fixed

的技巧，但根本没有结果。

PS：我只需要线条着色效果而不是图标。

*如果无法仅使用 CSS 来完成，我接受并使用最少的 js/jquery 解决方案。

Answer 1

我考虑过使用位置粘性。
备注：

• 浏览器支持并不完美：https://caniuse.com/css-sticky
• 正文必须在该区域之后继续，以便您可以滚动以填充时间线。

body {
  height: 200vh;
}

.area {
  height: 120vh;
  background: #f6f8ff;
}

.timeline-box {
  height: 120vh;
  position: relative;
  overflow-y: clip;
  padding-left: 256px;
}

.baseline {
  width: 32px;
  /*Line Width*/
  height: 120vh;
  position: absolute;
  top: 0;
  background: #d9d9e8;
  /* Baseline Color*/
}

.timeline {
  width: 32px;
  /*line width*/
  position: sticky;
  top: 0;
}

.timeline>div {
  position: absolute;
  width: 100%;
  height: 120vh;
  background: #5c53f3;
  /*Color of the filled timeline*/
  top: -100vh;
  /*Starting point*/
}

<div class="area">
  <!--General Area with the Timeline-->
  <div class="timeline-box">
    <!--Box with all timeline elements. Can be moved and resized-->
    <div class="baseline"></div>
    <div class="timeline">
      <div></div>
    </div>
  </div>
</div>